Строчно-блочные элементы

В соответствии с гибридным внешним видом имени значения inline-block строчно-блочные элементы и в самом деле представляют собой гибрид блочных и строковых элементов. Это значение свойства display введено в CSS2.1. Строчно-блочный элемент ведет себя по отношению к другим элементам и содержимому как строковый блок. Иначе говоря, он компонуется в строку текста, как это происходило бы с изображением, и, по сути, строчно-блочные элементы форматируются в строке как замещаемый элемент. Это означает, что низ такого элемента по умолчанию располагается на базовой линии строки текста и не разрывает строку.

Содержимое строчно-блочного элемента форматируется так же, как для блочных элементов. К нему применяются свойства width и height, как это происходит для любого блочного или замещаемого строкового элемента, и эти свойства увеличивают высоту строки, если их значение превышает эти величины для остального содержимого. Рассмотрим пример разметки, который поможет прояснить ситуацию:

This text is the content of a block-level level element. Within this block-
level element is another block-level element.

Look, it's a block-level
paragraph.

Here's the rest of the DIV, which is still block-level.

This text is the content of a block-level level element.


Within this block-level element is an inline element.

Look, it's an inline paragraph.


Here's the rest of the DIV, which is still block-level.

This text is the content of a block-level level element. Within this block-
level element is an inline-block element.

Look, it's an inline-block
paragraph.

Here's the rest of the DIV, which is still block-level.


К этой разметке применяем следующие правила:

div {margin: 1em 0; border: 1px solid;}
p {border: 1px dotted;}
div#one p {display: block; width: 6em; text-align: center;}
div#two p {display: inline; width: 6em; text-align: center;}
div#three p {display: inline-block; width: 6em; text-align: center;}

Обратите внимание, что во втором div абзац форматируется как обычное строковое содержимое, т. е. свойства width и text-align игнорируются (поскольку они не применяются к строковым элементам). Однако для третьего div строчно-блочный абзац обработал оба свойства, поскольку он форматируется как блочный элемент. Кроме того, строки текста этого абзаца более высокие, поскольку он оказывает на высоту строки такой эффект, какой оказывал бы замещаемый элемент.


Если свойство width строчно-блочного элемента не определено или прямо объявлено как auto, блок элемента сожмется до размера содержмого. То есть ширина блока элемента будет именно такой, какая необходима для вмещения содержимого, но не шире. Строковые блоки ведут себя аналогично, хотя они могут добавлять разрывы в строки текста, чего строчно-блочные элементы не могут. Таким образом, если применить к предыдущему примеру разметки следующее правило:

div#three p {display: inline-block; height: 2em;}

будет создан высокий блок, ширина которого будет как раз достаточной для того, чтобы вместить содержимое. Строчно-блочные элементы могут быть полезны, если, например, у вас есть набор из пяти гиперссылок, которые требуется разместить на панели инструментов на равных расстояниях. Чтобы сделать их ширину равной 20% ширины их родительского элемента, но все-таки оставить их строковыми, объявите:

#navbar a {display: inline-block; width: 20%;}

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическое определение высоты
Блок-контейнер
Блок-контейнер
Блочные элементы
Вертикальное выравнивание