CSS: различия в свойствах отображения

Блочные элементы обычно складываются вертикально, тогда как встроенные элементы выстраиваются горизонтально.

Два блока Div будут располагаться друг над другом, но если вы установите для них display: inline, они будут располагаться рядом друг с другом по горизонтали. И наоборот, с тегами Span.

display: block
заставит объект заставить другие объекты в контейнере перейти на новую строку.

display: inline
пытается отобразить объект в той же строке, что и другие объекты.

дисплей: блок

Item 1 
Item 2 
Item 3

дисплей: встроенный

Item 1 Item 2 Item 3

display: block означает, что элемент отображается как блок, как всегда были абзацы и заголовки. Блок имеет несколько пробелов над и под ним и не допускает никаких элементов HTML рядом с ним, за исключением случаев, когда заказывается иначе (например, путем добавления объявления float к другому элементу). display: inline означает, что элемент отображается внутри текущего блока в той же строке. Только когда он находится между двумя блоками, элемент образует «анонимный блок», который, однако, имеет минимально возможную ширину.

Блок использует всю доступную ширину с новой строкой до и после. Inline использует только необходимую ширину, не вводя новые строки.

да,

display: block заставляет элемент вести себя как блок, например: <p>

display: встроенный make и встроенный макет элемента.

их можно применить к элементам, которые по умолчанию относятся к противоположному типу отображения.

Возможные значения

* none - no display at all.
* inline - An inline box.
* block - A block box.
* inline-block - effectively a block box inside an inline box. Not supported by Mozilla at time of writing. IE will only apply inline-block to elements that are traditionally inline such as span or a but not p or div. Loopy.
* run-in - Either an inline or block box depending on the context. If a block box follows the run-in box, the run-in box becomes the first inline box of that block box, otherwise it becomes a block box itself. Crazy. Not supported by IE/Win or Mozilla at the time of writing.
* list-item - the equivalent of the default styling of the HTML li element.
* table - a block-level table - the equivalent of the default styling of the HTML table element. Not supported by IE.
* inline-table - an inline-level table. Not supported by IE.
* table-row-group - the equivalent of the default styling of the HTML tbody element. Not supported by IE.
* table-header-group - the equivalent of the default styling of the HTML thead element. Not supported by IE.
* table-footer-group - the equivalent of the default styling of the HTML tfoot element. Not supported by IE.
* table-row - the equivalent of the default styling of the HTML tr element. Not supported by IE.
* table-column-group - the equivalent of the default styling of the HTML colgroup element. Not supported by IE.
* table-column - the equivalent of the default styling of the HTML col element. Not supported by IE.
* table-cell - the equivalent of the default styling of the HTML td or th elements. Not supported by IE.
* table-caption - the equivalent of the default styling of the HTML caption element. Not supported by IE.

* источник

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

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

Как правило, вы используете блок для компоновки страницы, в то время как встроенный зарезервирован для текстового контента, который вы найдете внутри фрагментов текста, например, ссылок.

Существуют также другие типы контекста рисования, например display: table, однако они используются реже из-за их специализированного характера и / или отсутствия поддержки браузером.

Более подробная информация доступна в спецификация CSS 2.1.

Важно отметить, что встроенным элементам нельзя присвоить собственную ширину, высоту или вертикальные пробелы (поля / отступы сверху / снизу).

Если вы пытаетесь заставить блочные элементы вести себя как встроенные элементы (где они располагаются рядом друг с другом), вам следует использовать float. Поплавки будут складываться рядом с другими поплавками в том же направлении. Кроме того, любой встроенный элемент, которому задан float, автоматически станет блоком.

Документ HTML считается потоком, представьте себе стопку элементов HTML, сложенных до самого верха.

Блок определяется в потоке как блок (по умолчанию размером со страницу) и выдвигается максимально вверх, не перекрывая другой блок. Примеры: div, p, table.

Встроенный элемент не определяет поле (поэтому вы не можете установить его ширину и высоту), он будет добавлен к другим встроенным элементам в текущем блоке. Примеры: диапазон, код, файл.

display: block

Элемент займет весь контейнер своего родителя. Обычно начинается с новой строки.

display: inline-block

Это создаст встроенный элемент, который будет занимать ровно столько места, сколько требуется. Может начинаться в любом месте линии.

Пример использования: при создании строки меню в верхней части страницы (оболочке пунктов меню часто назначается display: inline-block)