Css display block width text

CSS display Property

The display property defines the type of the box which is used for an HTML element.

With the display property we can override the initial value of an element. For example, a block-level element could be displayed as an inline element by specifying a value of «inline». An inline element does not accept the height and width properties. It will just ignore it.

In HTML, the default values of the display property are taken from the behaviors which are described in the HTML specifications or from the browser or user default stylesheet. On the other hand, the default value in XML is «inline».

There are several main box formats in CSS:

• Inline
  Inline elements or inline-level elements are boxes flowing in a line without breaking it. The , , elements are part of a line box but cannot cause a line break. Inline elements can have padding and margins, but they cannot have width and height because defining them on an inline won’t change its dimensions. Specifying padding and margins on the element will push the other elements on the line only horizontally. However, an inline-level element can accept width and height, if it is set to be an inline-block element using the display property.
• Inline-block
  Inline-block elements are the same as inline element except that they except width and height. The width and height push the elements on the line both horizontally and vertically.
• Block
  Block boxed or block-level elements do not sit in a line box but break past it. By default, they occupy as much horizontal space as possible. Block-level elements can contain other block-level elements. The , , — , , , and are examples of block level elements.
• Flex
  The display property is also used for Flexbox. The flex value generates a block-level box for the element and lays out the content according to the Flexbox model. Here you can read about The Ultimate Guide to Flexbox.
• Grid
  The display property initially sets the Grid layout. It generates a block-level box for the element laying out the content according to the Grid model.
• Table Values
  Display values allows you to make non-table elements behave like table elements. Each of the table values forces the element to behave like a corresponding table element in HTML. The inline-table behaves like a HTML element, but as an inline box. There is a block-level context inside the table box.

Syntax

display: inline | block | contents | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit;

Example of the display property:

html> html> head> title>Title of the document title> style> .display li < display: inline; margin-right: 10px; > style> head> body> h2>Display property example h2> p>Here the list item is with its initial value: p> ul> li>List iteam li> li>List iteam li> ul> p>Here the list item is used with the display property. The "inline" value is used: p> ul class="display"> li>List iteam 1 li> li>List iteam 2 li> ul> body> html>

Result

Example of the display property with the «inline» and «block» values:

html> html> head> title>Title of the document title> style> .inline < border: 1px solid #1c87c9; display: inline; > .block < border: 1px solid #1c87c9; display: block; height: 30px; width: 300px; > style> head> body> h2>Display property example h2> p>Here the list item is with "initial" value. We see that the "inline" value does not accept height and width: p> span>This is some text. span> span class="inline">This is another text. span> hr> p>Here the list item is used with the "block" value of the display property: p> span class="block">This is some text. span> span class="block">This is another text. span> body> html>

Example of the display property with the «block» value:

html> html> head> title>The title of the document title> style> .block < display: block; border: 1px solid #666; background-color: #eee; padding: 10px; width: 200px; > .hello < border: 1px solid #1c87c9; background-color: #8ebf42; padding: 10px; > style> head> body> h2>Display property example h2> div class="block"> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. div class="hello">HELLO! div> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. div> body> html>

Example of the display property with the «contents» value:

html> html> head> title>Title of the document title> style> .contents < display: contents; border: 1px solid #666; background-color: #eee; padding: 10px; width: 200px; > .hello < border: 1px solid #1c87c9; background-color: #ccc; padding: 10px; text-align: center; > style> head> body> h2>Display property example h2> div class="contents"> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. div class="hello">HELLO! div> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. div> body> html>

Example of the display property with the «flex» value:

html> html> head> title>Title of the document title> style> #flex < width: 300px; height: 100px; border: 1px solid #c3c3c3; display: -webkit-flex; /* Safari */ -webkit-justify-content: center; /* Safari 6.1+ */ display: flex; justify-content: center; > div < width: 70px; height: 70px; > style> head> body> h2>Display property example h2> p>Here the "display: flex;" is used: p> div id="flex"> div style="background-color: #1c87c9;">1 div> div style="background-color: #666;">2 div> div style="background-color: #8ebf42;">3 div> div> body> html>

Values

Value	Description	Play it
inline	Represents an element as an inline element.	Play it »
block	Represents an element as a block element.	Play it »
contents	The container disappears, thus making the child elements children of the element the next level up in the DOM.	Play it »
flex	Represents an element as a block-level-flex container.	Play it »
grid	Represents an element as a block-level grid container.	Play it »
inline-block	Represents an element as an inline-level block container.	Play it »
inline-flex	Represents an element as an inline-level flex container.	Play it »
inline-grid	Represents an element as an inline-level grid container.	Play it »
inline-table	Represents an element as an inline-level table. It behaves like an HTML element, but as an inline box, and not as a block-level box. Inside the table box is a block-level context.	Play it »
list-item	The element behaves like HTML element.	Play it »
run-in	Represents an element as block or inline according to context.	Play it »
table	The element behaves like HTML element.	Play it »
table-caption	The element behaves like HTML element.	Play it »
table-column-group	The element behaves like HTML element.	Play it »
table-header-group	The element behaves like HTML element.	Play it »
table-footer-group	The element behaves like HTML element.	Play it »
table-row-group	The element behaves like HTML element.	Play it »
table-cell	The element behaves like HTML element.	Play it »
table-column	The element behaves like HTML element.	Play it »
table-row	The element behaves like HTML element.	Play it »
none	Means that the element won’t be shown at all.	Play it »
initial	Makes the property use its default value.	Play it »
inherit	Inherits the property from its parent element.

Browser support

Источник

Все значения свойства display

Свойство display имеет много разных значений. Обычно, используются только три из них: none , inline и block , потому что когда-то браузеры другие не поддерживали.

Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.

Значение none

Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.

 
Невидимый div ( 
Я - невидим!
 ) Стоит внутри скобок
 

Значение block

• Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float ).
• Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.

Это значение display многие элементы имеют по умолчанию: , заголовок , параграф

.

Блоки прилегают друг к другу вплотную, если у них нет margin .

Значение inline

• Элементы располагаются на той же строке, последовательно.
• Ширина и высота элемента определяются по содержимому. Поменять их нельзя.

Например, инлайновые элементы по умолчанию: , .

Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними и есть пробел. Это потому, что он есть в HTML.

Если расположить элементы вплотную – его не будет:

Содержимое инлайн-элемента может переноситься на другую строку.

При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.

Это проявляется, например, при назначении фона.

Например, три прямоугольника подряд:

 
. Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля .
 

Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:

Значение inline-block

Это значение – означает элемент, который продолжает находиться в строке ( inline ), но при этом может иметь важные свойства блока.

Во всём остальном – это блок, то есть:

Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.

Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:

Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.

Значения table-*

Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display .

Для таблицы целиком table , для строки – table-row , для ячейки – table-cell и т.д.

Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, описанные в стандарте.

Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.

table < display: table >tr < display: table-row >thead < display: table-header-group >tbody < display: table-row-group >tfoot < display: table-footer-group >col < display: table-column >colgroup < display: table-column-group >td, th < display: table-cell >caption

Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.

Вертикальное центрирование с table-cell

Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.

Это можно использовать для центрирования:

 div 
Элемент
С неизвестной
Высотой
 

CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV , это допустимо.

При этом он ведёт себя как ячейка TD , то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align .

Значения list-item, run-in и flex

У свойства display есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:

Этот display по умолчанию используется для элементов списка. Он добавляет к блоку с содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:

Если после run-in идёт block , то run-in становится его первым инлайн-элементом, то есть отображается в начале block .

Если ваш браузер поддерживает это значение, то в примере ниже h3 , благодаря display:run-in , окажется визуально внутри div :

Про пчёл.
 
Пчёлы - отличные создания, они делают мёд.

Если же вы видите две строки, то ваш браузер НЕ поддерживает run-in .

Вот, для примера, правильный вариант отображения run-in , оформленный другим кодом:

 
Про пчёл.
Пчёлы - отличные создания, они делают мёд.
 

Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает run-in . На момент написания этой статьи только IE поддерживал display:run-in .

Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module

Источник