CSS: показать различия

Question

В чем разница между дисплеем: блоком и дисплеем: встроенным

Answer 1

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

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

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

Item 1 
Item 2 
Item 3

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

Item 1 Item 2 Item 3

Answer 2

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

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

Answer 3

да,

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

Дисплей

: встроенная марка и расположение элементов.

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

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

* 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.

* источник

Answer 4

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

Answer 5

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

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

Answer 6

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

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

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

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

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

Answer 7

display: block

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

display: inline-block

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

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

Answer 8

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

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

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

Answer 9

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