display

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

---

Атрибут 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>	<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>	<img> <button> <input> <select> <textarea>

Наиболее прозрачным образом ведут себя блочные элементы

Для них работают как внешние, так и внутренние оступы, как сверху, так и снизу, и уж тем более слева и справа

Они по умолчанию растягиваются на всю ширину видимой части окна браузера, хотя им можно установить ширину

Установка ширины не повлияет на их захватническое поведение - они не допустят появления соседей слева или справа

Немного сложнее со строчными элементами

У них работают только боковые margin

Сверху и снизу внешние отступы не работают

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

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

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