Отступ от блока css. Как сделать отступы в CSS? Причина появления отступа
На первый взгляд, позиционирование блоков в CSS может показаться простой задачей. Но, на практике все получается сложнее. Поэтому, перед практическими занятиями версткой хорошенько разберитесь с теорией.
Блочная модель и позиционирование
Немного повторения. В статье об упоминалось, что все блочные элементы имеют прямоугольную форму. Они располагаются на веб-странице один под другим — такой порядок следования блочных элементов называют общим потоком. Рассмотрим на примере расположение бл. эл. в общем потоке:
div-контейнер
Элемент списка
А так это выглядит в браузере:
Для блоков указывают размеры полей и отступов. Определяют и границу между ними, она же будет и рамкой самого блока. Эти внутренние отступы(поля) и размеры рамки меняют первоначальные длину и ширину блока.
Порядок позиционирования в CSS определяется свойством position. Свойство position имеет пять значений:
static — применяется по умолчанию, и не изымается из общего потока веб-документа. К блокам с таким значением позиционирования не применимы параметры top, right, bottom и left.
inherit — задает блоку значения родительского элемента
relative — относительное поз — ие
absolute — абсолютное позиц — ие
fixed — фиксированное позицио — е
Задачи позиционирования — расположить бл.элемент на строго заданном месте, и определить его влияние на, расположенные вокруг него, другие элементы.
Относительное позиционирование
Относительное позиционирование подразумевает изменение положения блочного элемента исходя из его первоначального расположения. Иными словами — отправной точкой для отсчета параметров перемещения блока служат его исходные координаты.
Вот только место, только что покинутое элементом, из общего потока не изымается. Переместившись на другую позицию, блок по-прежнему влияет на соседние веб-конструкции, как если бы, он оставался на месте.
Предлагаю посмотреть действие свойства position: relative; на примере. Использован предыдущий код, с добавлением ширины всем блокам по 150px , также обнулены все отступы и поля по умолчанию, и еще для тега div добавили следующее:
position:relative;
top: 30px;
left:80px;
Теперь посмотрите скриншот.
Как видите, div переместился вправо и вниз относительно своих прежних координат. Блок li остался на прежнем месте. Подняться на освободившееся место ему мешает особенность значения relative, упомянутое выше. Но есть еще одна особенность у относительного позиционирования.
Блок div перекрыл часть нижнего элемента, это сделано специально, для наглядности. Данная особенность позволяет накладывать одни элементы дизайна на другие. В этой статье было рассмотрено лишь относительное позиционирование. Остальные значения свойства CSS position будут представлены в следующем посте.
Любая веб-страница состоит из расположенных на ней элементов, и практически всегда за их размещение отвечает блочная верстка div. Конечно, существует еще и табличная верстка с использованием тегов
,
,
, и существуют даже споры о том, какую лучше использовать систему — блочную или табличную. Однако в действительности в в настоящее время вы не встретите ни одного из современных, популярных и удобных сайтов, использующих только табличную верстку. В лучшем случае она используется только для того, для чего она и предназначена — то есть для создания таблиц, но никак не для формирования самой структуры сайта.
Дело в том, что div верстка сайта позволяет задавать множество css-свойств, недоступных для таблиц. Кроме того, самый главный недостаток табличной системы состоит в том, что таблица не будет показана на экране до тех пор, пока она не будет полностью загружена браузером. Если весь сайт сделан в таблице, то он появится на дисплее лишь после того, как будет полностью загружен весь html-код страницы.
Тег DIV и свойство float
Основа блочной системы — это тег
, который является контейнером для контента. Внутри него также могут содержаться другие контейнеры .
Использовать тег DIV — не сложнее, чем . Как правило, стандартная структура сайта формируется следующим образом: существует основной контейнер
(часто ему присваивается класс с названием wrapper, container, main и т.д.). Внутри этого контейнера располагаются блоки меню, контентной части, сайдбара.
По умолчанию, каждый новый блок располагается с новой строки. Для того, чтобы расположить блок слева или справа от другого (например, чтобы расположить сайдбар справа), используется свойство float. По умолчанию оно имеет значение «none», но можно также выставлять значения «left» и «right».
Рассмотрим это свойство на примере с двумя блоками.
Блок для контента
Блок для сайдбара
Этот код даст следующий результат:
Свойство clear
Важно учитывать, что свойство float распространяется не только на сам блок, в котором оно прописано, но и на последующий элемент, который будет идти за этим блоком. То есть если мы к вышеописанным двум блокам добавим еще один блок, не указывая ему никаких свойств, то он расположится не с новой строки, а начнется справа от второго блока.
Для того, чтобы избежать этого, блочная верстка div использует свойство clear, которое должно быть задано для того блока, который мы хотим расположить с новой строки. Чаще всего для этого ему задается значение «both», но можно также задать значения «left» или «right», если мы хотим не просто расположить блок на новой строке, но и задать ему выравнивание.
Дополним вышеуказанный пример новым элементом:
Блок для контента
Блок для сайдбара
Новый блок, расположенный снизу
Результат:
Отступы в блочной верстке
Помимо расположения блоков, немаловажным является задание отступов как между блоками, так и внутри них. Для этого, соответственно, используются свойства margin и padding.
Отступы задаются отдельно для верхней, правой, нижней и левой частей элемента. Их можно задать одной строкой путем перечисления четырех значений:
Margin: 20px 10px 0 40px
Блок с такими параметрами будет располагаться на 20 пикселей ниже вышестоящего элемента, на десять пикселей от правостоящего элемента, будет иметь нулевой отступ снизу и будет иметь отступ размером в 40 пикселей слева.
Если все те же самые показатели указать в свойстве padding, то это будут внутренние отступы для контента по отношению к границам блока, в которых он расположен.
Можно также задавать отдельные свойства для отдельных граней с помощью margin-top, margin-bottom, margin-left, margin-right (и аналогично для padding). В таком случае, если какая-то из граней не будет указана, то отступ с ее стороны будет равен нулю или будет определен общими свойствами css, заданными для блоков на странице.
Блочная модель CSS в английском языке называется Box model (box - это коробка). Этот перевод немного помогает понять суть блочной модели. Суть в том, что при формировании страницы на экране используются блоки - прямоугольные области экрана.
Блочная модель CSS - это одна из основ для понимания CSS, модель форматирования документа.
Перед изучением CSS вы должны были изучить HTML, а значит вам должно быть известно что теги HTML делятся на блочные элементы и строчные элементы.
Блочные элементы - теги создающие блок, то есть они занимают всю доступную ширину (от края до края), высота блочного элемента зависит от его содержимого, блочный элемент всегда занимает новую строку. Примеры блочных элементов - теги
И
.
Строчные элементы - теги которые не создают своих блоков, а влияют на отображение содержимого блока. Пример таких тегов -
,
,
и другие.
Давайте на примере рассмотрим отличия этих групп элементов.
Блочная модель CSS
Блок тега div.
Блок тега p. Этот кусок текста выделен тегом em.
Этот пример наглядно показывает что теги
И
создают свои блоки. Каждый блок начался с новой строки. Для блока
была задана ширина и высота, а блок
Занял всю ширину экрана, его высота равна высоте его содержимого. Чтобы это было видно, для обоих элементов установлен жёлтый фоновый цвет.
Тег
просто отформатировал текст внутри блока
Подробнее про блоки.
Любой блочный элемент имеет установленный набор свойств, которые можно менять при помощи CSS.
Основа блока - его контент или содержание, ширина поля контента задаётся свойством width
, а высота свойством height
. Но у блока есть и другие поля, они как листья капустны накладываются друг на друга.
Проще показать это в виде рисунка.
Мы видим, что кроме самого поля контента, у блока есть ещё три свойства:
Внутренний отступ - padding
- по английский "набивка". Набивка - то, что набито, чем заполнена внутренность чего-либо. padding
- это часть блока от края контента до границы.
Граница - border
- по английский и есть "граница". Границу блочного элемента можно установить разными стилями: сплошной линией, точками, пунктиром; можно установить цвет границы. Подробно о том, как управлять свойством border
речь пойдёт ниже.
Внешний отступ - margin
- по английски "маржа". В экономическом значении маржа значит разницу между себестоимостью и ценой.
В рамках этой статьи свойство outline
мы рассматривать не будем. Только отмечу: на размер блока это свойство не влияет.
Остальными свойствами можно управлять при помощи CSS устанавливая их размер и некоторые другие стилевые значения. Давайте рассмотрим это на примере.
Блочная модель CSS
Блок тега div.
Блок тега p. Этот абзац имеет знаяения свойств по умолчанию.
Стиль: padding: 10px.
Стиль: margin: 30px.
Результат должен быть такой:
Рисунок 2. Работа примера №2.
Мы видим чёрную (black
) рамку толщиной 3px
вокруг блока, созданного тегом
. Первый абзац отформатирован по умолчанию, за исключением фонового цвета. Во втором абзаце установлен внутренний отсуп (padding
) размером 10px
, видно что вокруг текста площадь заливки фоновым цветом увеличилась. Третий абзац не имеет внутреннего отступа, но задан внешний отступ margin
размером 30px
. Мы видим что расстояне между этим и вторым абзацем больше, чем между вторым и первым - это работает внешний отступ.
Границы и отступы не являются обязательными свойствами блока, значения всех их может быть равно нолю.
Как устанавливаются фоновые цвета для этих свойств?
Внутренний отступ - padding
- всегда имеет цвет фона самого элемента, заданного в свойстве background-color
.
Граница - border
- её цвет задаётся свойством border-color
.
Внешний отступ - margin
- он всегда прозрачен, поэтому цвет этой области совпадает с фоновым цветом элемента родителя (в нашем случае это белый фоновый цвет элемента
установленный по умолчанию).
Расширенные возможности управления свойствами блока
Кроме управления всеми сторонами блока одновременно, есть позможность управлять каждой стороной каждого свойства отдельно. Вот рисунок, который демонстрирует свойства CSS для такого управления стилями блока.
Рисунок 3. Блочная модель CSS.
Рассмотрим подробнее свойства блоков и приведём примеры их использования.
Внутренний отступ - padding
Внутренний отступ - padding
- расстояние от внутреннего края границы до условного прямоугольника, ограничивающего контент блока. Так как внутренний отступ может быть разным у каждой стороны блока, то говорят «верхний внутренний отступ» или «отступ сверху». Стоит отметить что в разных книгах по CSS для свойства padding
используются различные переводы, в некоторых он называется просто отступ, в других поле, а отступом называют свойство margin
.
Основная функция внутреннего отступа - создать пустое пространство между содержимым блока и границей, например чтобы текст не прилегал вплотную к границе. Внутренние отступы делают внешний вид страницы более привлекательным, а текст, оформленный с их использованием будет более читабельным.
Блочная модель CSS
Результат должен быть такой:
Рисунок 4. Работа примера №3.
Мы видим красиво оформленный блок с внутренними отступами до границы.
Граница - border
Границы - это линии вокруг внутреннего содержимого элемента. Границу можно установить для всех сторон блока, или для любого числа. Для границы можно задать толщину, стиль и цвет. Для создания рамки (границы), как писалось ранее, в CSS существует свойство border
. В этом свойстве можно прописать все характеристики рамки (толщину, стиль и цвет). А для создания границ на отдельных сторонах блока нужно воспользоваться свойствами border-top
, border-right
, border-bottom
и border-left
.
Блочная модель CSS
Результат выполнения кода должен быть такой:
Рисунок 5. Работа примера №4.
Внешний отступ - margin
Отступ - это пространство от границы блока до его внешнего края. Отступы устанавливаются свойством margin
. Как и в случае с внутренними полями и границами, отступы можно задавать для любой стороны блока. Например, свойство margin-left
управляет отступом блока с левой стороны.
Особенности внешних отступов.
Внешний отступ всегда прозрачен. Он не принимает цвет фона или фоновое изображение установленное для блока, к которому он относится. Однако, он принимает фон родительского элемента.
Внешние отступы суммируются. Если между блоками заданы отступы по 25px, то расстояние между ними будет не 50px, а 25px, так как внешние отступы накладываются друг на друга.
Для внешнего отступа можно задавать отрицательное значение. Такое значение сдвигает блок, например объявление margin-left
: -20px
сдвинет блок влево на двадцать пикселей.
Отступы можно задавать в процентах, такие отступы вычисляются от размера блока контента. Это будет делаться в отношении как горизонтальных, так и вертикальных отступов.
Блочная модель CSS
Прошли тысячелетия. Механизм, предназначенный для работы вечно, остановился.
Системы жизнеобеспечения были повреждены.
Прошли тысячелетия. Механизм, предназначенный для работы вечно, остановился.
Системы жизнеобеспечения были повреждены.
Странник оглянулся вокруг. Во всех направлениях до горизонта была пустыня.
Рассмотрим этот пример подробней. Результат его выполнения должен быть такой:
Рисунок 6. Работа примера №5.
Для тега
Тут задана рамка толщиной 1px. Это сделано для того, чтобы было видно где начинается область внешнего отступа этого тега.
Один тег
Помещён в блок
с установленным фоновым цветом. Видно что внешний отступ тега
Принял фоновый цвет тега
. А теги
Находящиеся вне этого блока, имеют белый цвет внешнего отступа, соответствующий фоновому цвету блока
по умолчанию.
Последний, пустой абзац, имеет высоту height
: 20px
, он помещён в пример только для того, чтобы было лучше видно что расстояние между абзацами составляет 20px и равно высоте этого пустого абзаца. В таблице стилей для тега
Задано объявление margin
: 20px
, видно что внешние отступы абзацев сливаются и расстояние между абзацами равно не 40px, а 20px.
Ширина блока - составная величина, она складывается из суммы значений нескольких свойств:
width
- ширина содержимого блока;
padding-left
и padding-right
- внутренний отступ слева и справа от содержимого;
border-left
и border-right
- толщина границы слева и справа;
margin-left
и margin-right
- внешний отступ слева и справа.
Значения некоторых свойств могут быть равны нолю, тогда они не влияют на ширину блока.
На рисунке 7 блок обозначен чёрной пунктирной линией.
Рисунок 7. Ширина блока.
Если в блоке значение width
не задано в таблице стилей, то оно устанавливается по умолчанию как auto
. В этом случае поле контента займёт всю доступную ширину (родительский блок или, если его нет, окно браузера), но размеры всех отступов и граница при этом сохранятся.
Посчитаем ширину блока на примере следующего стиля:
Width: 400px; /* Ширина блока */
padding: 5px; /* Отступ до границы */
border-width: 3px; /* Толщина границы */
margin: 7px; /* Внешний отступ */
Сложим все слагаемые, составляющие ширину блока:
Ширина блока = 400 + 5*2 + 3*2 + 7*2 = 430px.
Устаревшая блочная модель
Исторически так сложилось, что метод расчёта ширины блока описанный выше использовался не всегда. На данный момент он является стандартом, принятым концерном W3C. Но раньше свойство width
не было равно полю контента, а представляло собой постранство блока, которое включает свойство border
. Источником такой блочной модели была компания MicroSoft и на её основе работал браузер Internet Explorer до версии 7. На рисунке продемонстрировано сравнение двух блочных моделей.
Рисунок 8. Две блочные модели.
В сети сохранилось огромное количество старых документов, которые создавались в старой блочной модели, которую также называют «режим совместимости». Поэтому списывать её со счетов не стоит.
Важно знать
: если в документе на задан
, то браузеры переходят в режим совместимости.
Свойство box-sizing
При расчёте ширины блока при использовании в свойстве width
процентов в качестве единицы измерения могут возникнуть определённые проблемы. Проценты - это относительная величина, а это делает её несколько непредсказуемой, особенно если внутренний отступ и граница заданы в абсолютных единицах. В итоге возможен вариант, когда суммарная ширина блока превысит ширину окна браузера, а это приводит к появлению горизонтальной полосы прокрутки.
Подробно вникать в суть проблему не будем, это не уровень этой статьи. Тут только отмечу, что устаревшая система иногда оказывается полезной. Для возможности менять алгоритм блочной модели в CSS3 ввели полезное свойство box-sizing
. При значении border-box
ширина блока начинает включать поля и границы, но не внешние отступы. Таким образом, назначая свойству box-sizing
значение border-box
, мы можем задавать ширину блока width
в процентах и спокойно указывать свойства border
и padding
нужной нам величины, не боясь, что изменится ширина блока.
При формировании высоты блока используется та же формула, что и при формировании ширины блока. Высота блока - это сумма высоты поля контента, границы, внутреннегот и внешнего отступов (верхних и нижних конечно же). Если значение свойства height
не указано, то по умолчанию устанавливается значение auto
, в этом случае высота поля контента вычисляется автоматически и зависит от самого контента.
На рисунке 9 показаны все свойства, из которых складывается суммарная высота блока, обозначенного чёрным пунктиром.
Рисунок 9. Высота блока.
Хотя формула определения высоты блока и его ширины весьма похожи принципиально, но при работе с блоками в этом плане есть существенные различия.
Давайте сразу передём к примеру и рассмотрим случай, в котором свойствам блока width
и height
назначены значения 200%
.
Блочная модель CSS
Блоку также задан фоновый цвет, чтобы была видна его площадь. Вот как он выглядит:
Рисунок 10. Работа примера №6.
Мы видим что по горизонтали образовалась полоса прокрутки, размер которой в два раза превышает размер окна браузера, т.е. блок по ширине всегда равен 200% от родительского элемента - окна браузера. Но во вертикали такого эффекта нет. Использование процентов для указания высоты не имеет смысла, так как высота высота родителя по умолчанию не существует и её надо указывать.
Блочная модель CSS
Блок с шириной = 200% и высотой = 100%.
Тут родительскому элементу для
- тегу
, установлена высота величиной 50px, и высота для
установлена 100%. То есть этот тег имеет высоту 50px.
Рисунок 11. Работа примера №7.
Видно, что площадь окрашенная в цвет #F3F3D6
увеличилась. Если окно браузера ещё уменьшить по высоте, то появится вертикальная полоса прокрутки, чего в прошлом примере не было.
Если в этом примере Но как сделать так, чтобы задать блоку параметр height
в процентах и это работало. Попробуйте изменить прошлый пример и для селектора body
установить свойство height
равное 100%
. Такой пример работат не будет. Почему? Потому что для тега
высота определяется относительно его родителя - тега
, а там высота не задана. Значит 100% от ничего равно ничего. Чтобы решить эту проблему нужно написать такой стиль:
Блочная модель CSS
Блок с шириной и высотой = 200%.
Только установив высоту в 100% для тегов
и
мы сможем установить высоту в процентах для тега
и она будет работать.
Рисунок 12. Работа примера №8.
При работе с высотой блока следует помнить о ещё одной особенности, если контент превышает размер блока, то он выходит за его рамки. Вот пример такого кода:
Блочная модель CSS
Прошли тысячелетия. Механизм, предназначенный для работы вечно, остановился.
Системы жизнеобеспечения были повреждены.
На примере видно, что текст вышел за границы блока.
Рисунок 13. Работа примера №9.
Избежать подобного очень просто - достаточно не задавать высоту контента (height
). Впрочем, иногда нужно строго определить высоту блока. В этом случае можно использовать свойство overflow
со значением auto
. Это свойство будет в блоке создавать полосу прокрутки в случае, если размер контента привысит размер блока.
Добавим в стиль примера №9 свойство overflow
со значением auto
и результат будет таким:
Рисунок 14. Свойство overflow со значением auto.
У свойства overflow
есть другое значение, которым также можно регулировать высоту блока - hidden
(англ. скрытый). Это значение просто скрывает всё, что не влазит в установленные размеры блока.
Рисунок 14. Свойство overflow со значением hidden.
Минимальная и максимальная ширина элемента
В этой статье также уместно вспомнить свойства min-width
и max-width
устанавливающие минимальную и максимальную ширину элемента соответственно.
Свойство min-width
работает так: если пользователь меняет размеры окна браузера, то ширина блока не становиться меньше минимальной, а в таком случае появляется полоса прокрутки. Значение ширины элемента будет зависеть от значений свойств width
, max-width
и min-width
.
В таблице приведены правила расчёта браузерами ширины блока при использовании этих свойств.
Табл. 1. Ширина элемента
Значения свойств
Ширина
min-width
<
width
<
max-width
width
min-width
>
width
>
max-width
min-width
min-width
>
width
<
max-width
min-width
min-width
<
width
width
min-width
>
width
min-width
min-width
>
max-width
min-width
min-width
<
max-width
max-width
Свойство max-width
- устанавливает максимальную ширину элемента. Пример использования свойства max-width
:
Блочная модель CSS
Прошли тысячелетия. Механизм, предназначенный для работы вечно, остановился.
Системы жизнеобеспечения были повреждены.
Странник оглянулся вокруг. Во всех направлениях до горизонта была пустыня.
Минимальная и максимальная высота элемента
Аналогично есть свойства для назначения минимальной и максимальной высоты элемента: min-height
и max-height
.
Довольно часто верстальщики сталкиваются с проблемами размещения элементов на странице из-за присутствия лишних отступов при определенных ситуациях. В статье будет рассмотрен случай, когда картинку размещают внутри блока, в результате чего появляются неизвестный отступ. Здесь вы найдете объяснение и решение этой проблемы.
Как и в обычной жизни, в верстке бывают аномальные ситуации, которые сложно объяснить. Именно такая ситуация может возникнуть, когда тег для вставки изображений (img) вставляется в контейнер, который обладает свойствами блочного элемента или плавающего объекта. Конфуз этой ситуации заключается в непонятном отступе, появляющемся ниже изображения.
Рассмотрим практический пример
Итак, для наглядности и лучшего восприятия проблемы предлагаю все посмотреть и, так сказать, «пощупать» на практике. Берем любое изображение и одеваем его в div. Ниже вы видите пример кода:
При оформлении стилей зальем внутренний фон блока красным цветом. При нормальных условиях картинка полностью займет все место внутри блока и перекроет красный фон. Прописываем код для оформления
div {
display:
block;
width:
250px;
margin:
0px auto;
/*Центруем блок*/
background:
#ff0000;/*Зальем блок красным цветом,
чтобы визуализировать отступ*/
}
body {
background:
#eee;
}
В результате чего браузер нам покажет следующую картину
Судя по красной полосе в нижней части контейнера можно констатировать, что непонятный отступ имеет место. Воспользовавшись панелью веб-мастера в браузере, стало известно, что отступ составил 5,511 пикселей.
Очень забавляет тот факт, что во всех популярных браузерах этот баг присутствует, а вот всеми любимый Internet Explowerd в этом случае отрабатывает безупречно.
Причина появления отступа
Как человек с высшим техническим образованием смею Вас заверить, что ничего не происходит просто так, у всего есть причины. Разобравшись в этом вопросе я еще раз в этом убедился. Весь конфуз заключается в стандартных свойствах элементов. По умолчанию тег img имеет свойства строчного элемента, что в свою очередь означает, что элемент будет выравниваться по базовой линии текста. Эта линия располагается чуть выше нижнего края блока, так как для текста существует обязательный запас- место под «хвосты» букв.
Решение проблемы
Для исправления этого мелкого недочета достаточно присвоить изображению свойства блочного элемента. С этим нам поможет свойство display , прописываем картинке display: block;
и избавляемся от ненужных проблем. Также можно подключить вертикальное выравнивание через свойство vertical-align . Это тоже поможет избавиться от нежелательного отступа.
В каких браузерах работает?
6.0+
5.0+
9.5+
4.0+
3.0+
-
-
Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items. In this lesson we will take a proper look at the CSS Box Model
, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it.
Prerequisites:
Basic computer literacy, basic knowledge of , HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps .)
Objective:
To learn about the CSS Box Model, what makes up the box model and how to switch to the alternate model.
Block and inline boxes
In CSS we broadly have two types of box - block boxes
and inline boxes
. These characteristics refer to how the box behaves in terms of page flow, and in relation to other boxes on the page:
If a box is defined as a block, it will behave in the following ways:
The box will extend in the inline direction to fill the space available in its container. In most cases this means that the box will become as wide as its container, filling up 100% of the space available.
The box will break onto a new line.
The width and height properties are respected.
Padding, margin and border will cause other elements to be pushed away from the box
Unless we decide to change the display type to inline, elements such as headings (e.g.
) and
S all use block as their outer display type by default.
If a box has an outer display type of inline , then:
The box will not break onto a new line.
The width and height properties will not apply.
Padding, margin and borders will apply but will not cause other inline boxes to move away from the box.
The type of box applied to an element is defined by display property values such as block and inline , and relates to the outer
value of display .
Aside: Inner and outer display types
At this point we"d better also explain inner
and outer
display types. As mentioned above, boxes in CSS have an outer
display type, which details whether the box is block or inline.
Boxes also have an inner
display type, however, which dictates how elements inside that box are laid out. By default the elements inside a box are laid out in normal flow
, which means that they behave just like any other block and inline elements (as explained above).
We can however, change the inner display type by using display values like flex . If we set display: flex; on an element, the outer display type is block , but the inner display type is changed to flex . Any direct children of this box will become flex items, and will be laid out according to the rules set out in the Flexbox spec, which you"ll learn about later on.
Note
: To read more about the values of display, and how boxes work in block and inline layout, take a look at the MDN guide to Block and Inline Layout .
When you move on to learn about CSS Layout in more detail, you will encounter flex , and various other inner values that your boxes can have, for example grid .
Block and inline layout however is the default way that things on the web behave - as we said above, it is sometimes referred to as normal flow
, because without any other instruction, our boxes lay out as block or inline boxes.
Examples of different display types
Let"s move on and have a look at some examples. Below we have three different HTML elements, all of which have an outer display type of block . The first is a paragraph, which has a border added in CSS. The browser renders this as a block box, so the paragraph begins on a new line, and expands to the full width available to it.
The second is a list, which is laid out using display: flex . This establishes flex layout for the items inside the container, however the list itself is a block box and - like the paragraph - expands to the full container width and breaks onto a new line.
Below this we have a block level paragraph, inside which are two elements. These elements would normally be inline , however one of the elements has a class of block, and we have set it to display: block .
We can see how inline elements behave in this next example. The s in the first paragraph are inline by default and so do not force line breaks.
We also have a
which is set to display: inline-flex , creating an inline box around some flex items.
Finally we have two paragraphs both set to display: inline . The inline flex container and paragraphs all run together on one line rather than breaking onto new lines as they would do if they were displaying as block-level elements.
In the example you can change display: inline to display: block or display: inline-flex to display: flex to toggle between these display modes.
You will encounter things like flex layout later in these lessons; the key thing to remember for now is that changing the value of the display property can change whether the outer display type of a box is block or inline, which changes the way it displays alongside other elements in the layout.
In the rest of the lesson we will concentrate on the outer display type.
What is the CSS box model?
The full CSS box model applies to block boxes, inline boxes only use some of the behavior defined in the box model. The model defines how the different parts of a box - margin, border, padding, and content - work together to create a box that you can see on the page. To add some additional complexity, there is a standard and an alternate box model.
Parts of a box
Making up a block box in CSS we have the:
Content box
: The area where your content is displayed, which can be sized using properties like width and height .
Padding box
: The padding sits around the content as white space; its size can be controlled using padding and related properties.
Border box
: The border box wraps the content and any padding. Its size and style can be controlled using border and related properties.
Margin box
: The margin is the outermost layer, wrapping the content, padding and border as whitespace between this box and other elements. Its size can be controlled using margin and related properties.
The below diagram shows these layers:
The standard CSS box model
In the standard box model, if you give a box a width and a height , this defines the width and height of the content box
. Any padding and border is then added to that width and height to get the total size taken up by the box. This is shown in the image below.
If we assume that the box has the following CSS defining width , height , margin , border , and padding:
The space taken up by our box using the standard box model will actually be 410px (350 + 25 + 25 + 5 + 5), and the height 210px (150 + 25 + 25 + 5 + 5), as the padding and border are added to the width used for the content box.
Note
: The margin is not counted towards the actual size of the box - sure, it affects the total space that the box will take up on the page, but only the space outside the box. The box"s area stops at the border - it does not extend into the margin.
The alternative CSS box model
You might think it is rather inconvenient to have to add up the border and padding to get the real size of the box, and you would be right! For this reason, CSS had an alternative box model introduced some time after the standard box model. Using this model, any width is the width of the visible box on the page, therefore the content area width is that width minus the width for the padding and border. The same CSS as used above would give the below result (width = 350px, height = 150px).
By default, browsers use the standard box model. If you want to turn on the alternative model for an element you do so by setting box-sizing: border-box on it. By doing this you are telling the browser to take the border box as the area defined by any size you set.
Box {
box-sizing: border-box;
}
If you want all of your elements to use the alternative box model, and this is a common choice among developers, set the box-sizing property on the element, then set all other elements to inherit that value, as seen in the snippet below. If you want to understand the thinking behind this, see the CSS Tricks article on box-sizing .
Note
: An interesting bit of history - Internet Explorer used to default to the alternative box model, with no mechanism available to switch.
Playing with box models
In the below example, you can see two boxes. Both have a class of .box , which gives them the same width , height , margin , border , and padding . The only difference is that the second box has been set to use the alternative box model.
Can you change the size of the second box (by adding CSS to the .alternate class) to make it match the first box in width and height?
Use browser DevTools to view the box model
To set the width, color, and style of each side individually, you can use:
To set the color, style, or width of all sides, use the following:
To set the color, style, or width of a single side, you can use one of the most granular longhand properties:
In the example below we have used various shorthands and longhands to create borders. Have a play around with the different properties to check that you understand how they work. The MDN pages for the border properties give you information about the different styles of border you can choose from.