В качестве примера давайте рассмотрим структуру HTML этого документа.

Здесь есть тег h1 и тег div с идентификатором box, а внутри этого div есть еще один div с идентификатором content и текстом.

И так как div является элементом блочного уровня, он пытается заполнить родительский элемент целиком по ширине.

Но если приглядеться, здесь есть некоторое пространство между заголовком и текстом.

Давайте откроем инструменты разработчика Chrome и выясним, что это за пространство.

Давайте выберем тег body и посмотрим, что происходит.

И мы видим, что тег body имеет отступ около восьми пикселей. Откуда же взялись эти восемь пикселей?

И здесь написано таблица стилей пользовательского агента. Это означает, что это сам браузер. Это стили браузера по умолчанию.

Мы можем сделать margin 0, и когда мы это сделаем, мы увидим, что теперь наш контент находится на одном уровне с фактическими границами окна браузера.

Далее вы можете видеть, что контекст зеленый. Но мы не видим фон блока, в котором на самом деле находится контент, потому что мы бы видели что-то синее на заднем плане.

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

Поэтому давайте установим некоторые отступы внешнего блока.

Давайте установим padding 10 пикселей сверху, 10 пикселей справа, 10 пикселей внизу и 10 пикселей слева.

И вуаля, теперь мы увидели синий фон. Также мы добавили этому блоку черную границу с толщиной 5 пикселей и размеры самого блока 300 пикселей на 50 пикселей, а также отступ сверху от заголовка 50 пикселей.

Кроме того, мы добавили свойство overflow. Свойство overflow указывает, следует ли обрезать содержимое или добавить полосы прокрутки, когда содержимое элемента слишком велико и не помещается в указанной области. И свойство overflow имеет следующие значения:

visible – по умолчанию. Переполнение контента в блоке не отсекается, и содержимое отображается за пределами блока.

hidden – переполнение контента обрезается, и остальное содержимое будет невидимым.

scroll – переполнение контента обрезается, и добавляется полоса прокрутки, чтобы увидеть остальную часть содержимого.

auto – аналогично прокрутке, но добавляет полосы прокрутки только при необходимости.

В результате мы можем увидеть, что наш блок имеет размеры не 300 пикселей на 50 пикселей, а здесь добавляется отступ, ширина границы и поле. Так что, когда вы устанавливаете размеры блока, нужно учитывать и все остальные свойства. Здесь на самом деле мы устанавливаем не ширину блока, а ширину содержимого.

В CSS 3 есть такое свойство как box-sizing со значением border-box.

Свойство CSS box-sizing позволяет нам включать отступы и границы в общую ширину и высоту элемента.

Без свойства CSS box-sizing, по умолчанию ширина и высота элемента вычисляются следующим образом:

ширина + отступ + граница = фактическая ширина элемента

высота + отступ + граница = фактическая высота элемента

С этим значением border-box свойства box-sizing все будет включено и размер нашего блока станет 300 пикселей на 50 пикселей.

Конец ознакомительного фрагмента.