Правило в CSS: display

Если вы зайдете на сайт спецификации 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}