Если вы зайдете на сайт спецификации CSS3 и CSS2 (www.w3.org/TR/CSS2/sample.html), там увидите стили по умолчанию. И одно из самых главных правил здесь — display. Именно с описания этого правила начинается вся работа с элементами html. Например, откуда браузер знает, что параграф — это блочный элемент? А вот откуда:
html, adress, body,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,ol,p,ul, center,dir,hr,menu,pre {display: block}
Это правило, которое по умолчанию есть в любом браузере. У правила дисплей прописано куча значений.
Все элементы делятся на строчные и блочные. И внутри строчных элементов не может появляться блочный контент.
В строчных элементах применяются следующие значения правила display:
- inline — это большинство элементов, т.н. phrase-elements (элементы уровня текста): span, em, strong, a. В этих элементах не может стоять блочный контент.
- inline-block — строчно-блочные элементы. Это строчные элементы, но внутри можно ставить любой контент. К ним относятся все строчные элементы с замещаемым контентом (img, iframe, object, embed, audio, video, canvas) и элементы форм (input, textarea, select, button).
- inline-table — позволяет вставить таблицу как строчный элемент, т.е. таблица здесь выступает как часть строки, как часть слова, но внутри таблицы сохраняется ее обычная структура.
В блочных элемента применимы следующие значения display:
- block — указание, что элемент является блочным (p, h1-h6, div, form).
- list-item — актуально только для элемента li. Это область для маркера.
- table — табличные элементы. Здесь для каждой части таблицы есть свое представление display:
{display: table} {display: table-row} {display: table-header-group} {display: table-row-group} {display: table-footer-group} {display: table-column} {display: table-column-group} {display: table-cell} {display: table-caption}
- run-in — в зависимости от своего содержания элемент может быть как строчным, так и блочным. Т.е. он может перескакивать из одной стадии в другую.