Block model default elements behaviour

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

---

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

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

Блочные элементы
Наиболее прозрачным образом ведут себя блочные элементы Для них работают как внешние, так и внутренние оступы, как сверху, так и снизу, и уж тем более слева и справа Они по умолчанию растягиваются на всю ширину видимой части окна браузера, хотя им можно установить ширину Установка ширины не повлияет на их захватническое поведение - они не допустят появления соседей слева или справа	<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>

---

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

Инлайновый контекст, в котором участвует элемент, имеет высоту строки Она определяется метриками шрифта для обычного ( строчного ) текста Блочно-строчные элементы влияют на высоту строки, причем не только своими размерами, но также внутренними и внешними отступами и вертикальным выравниванием ( vertical-align ) Таким образом их блочные характеристики отражаются на внешнем строчном контексте, в котором они находятся

<img> <button> <input> <select> <textarea> <legend>

^{Обратите внимание, что при изменении значения vertical-align для элемента img высота строки изменяется}

^{По умолчанию выравнивание происходит по базовой линии текста, в силу чего ниже картинки образуется зазор, что приводит к увеличению высоты строки}

^{Если изменить вертикальное выравнивание элемента img, например, так:}

img {
    vertical-align: bottom;
}

^{то зазор исчезает, и высота контейнера становится равной высоте изображения плюс удвоенная ширина рамки контейнера
( поскольку высота изображения больше высоты строки )}

^{Установка отступов margin и padding для элементов input и button также приводит к изменению высоты строки}

^{При этом инлайновые элементы влияют на высоту строки только своим значением font-family и font-size}

---

Строчные элементы
Немного сложнее со строчными элементами У них работают только боковые 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;
}