display

Блочная модель

---

Блочные и строчные элементы

У каждого элемента есть дефолтные настройки отображения

Блочные элементы
Наиболее прозрачным образом ведут себя блочные элементы Для них работают как внешние, так и внутренние оступы, как сверху, так и снизу, и уж тем более слева и справа Они по умолчанию растягиваются на всю ширину видимой части окна браузера, хотя им можно установить ширину Установка ширины не повлияет на их захватническое поведение - они не допустят появления соседей слева или справа	<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt>	<fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main>	<nav> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

---

Блочно-строчные элементы
Элемент является участником инлайнового контекста снаружи и началом нового блочного контекста внутри Инлайновый контекст, в котором участвует элемент, имеет высоту строки Она определяется метриками шрифта для обычного ( строчного ) текста Блочно-строчные элементы влияют на высоту строки, причем не только своими размерами, но также внутренними и внешними отступами	<img> <button> <input> <select> <textarea> <legend>

Какому же составному значению будет псевдонимом наш inline-block? Думаете, «inline block» («инлайновый снаружи, блочный внутри»)? Вот и нет! На самом деле его полное значение вот какое:

inline flow-root

В инлайновом контексте форматирования ничего блочного быть не может. По построению. Как только в контейнере появляется что-то с display:block, контейнер по волшебству — то есть по стандарту — превращается из контейнера текста в контейнер блоков, и у нового блока появляются анонимные блочные соседи. Поэтому, чтобы вставить блочное содержимое в инлайновый контекст, нужен некий «переходник». Начало блочного контекста форматирования, ведущее себя как элемент строки — это он и есть. По-видимому, редакторы спецификаций сами поняли это только с появлением самого flow-root. Из-за этого «запоздалого прозрения» пришлось спешно решать еще одну проблему… но о ней чуть позже, в продолжениях.

То, что он сам участвует в инлайновом контексте — ключевая особенность инлайн-блока. Из нее вытекают и многие его преимущества, и почти все раздражающие недостатки. Они, кстати, будут и у inline-table, inline-flex и inline-grid, так что это знание пригодится во многих ситуациях.

---

---

Строчные элементы
Немного сложнее со строчными элементами У них работают только боковые margin Сверху и снизу внешние отступы не работают Элемент всегда центрируется в строке	<a> <abbr> <acronym> <b> <bdo> <big> <br> <cite> <code>	<dfn> <em> <i> <kbd> <label> <map> <output> <q> <samp>	<small> <span> <strong> <sub> <sup> <time> <tt> <var>

a, span, b, strong, em, i, big {
    margin: 10px 20px;
    padding: 10px 20px;
    line-height: 30px;
}

У них есть padding, и они "работают" в том смысле, что если задать элементу background-color, то он окрасит внутренние отступы, но это не повлияет на положение элемента в строке

a, b {
    margin: 20px;
    padding: 50px;
}

---

Атрибут display

С помощью этого атрибута можно изменить дефолтные настройки отображения элемента

свойство display отвечает за:

• Внешнее поведение элемента — как он взаимодействует с соседями
• Внутреннее поведение элемента — как он влияет на размещение своих потомков

display	Описание
inline	строчный
block	блочный
inline-block	блочно-строчный
table	таблица
none	элемент не отображается, его место освобождается
...	...