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>

---

Блочно-строчные элементы
Во всем подобны блочным элементам, однако не растягиваются на всю ширину viewport и допускают соседство	<img> <button> <input> <select> <textarea> <legend>

---

---

Строчные элементы
Немного сложнее со строчными элементами У них работают только боковые 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	Описание
inline	строчный
block	блочный
inline-block	блочно-строчный
table	таблица
none	элемент не отображается, его место освобождается
...	...