Приветствую всех жителей хабравиля! Сегодня я подготовил для вас материал по основам по блочной модели CSS. Безусловно, многие из вас знают о чём идёт речь, но сегодня я постараюсь объяснить прописные истины более понятно и наглядно, что поможет вам создавать веб-сайты, с идеально подходящими друг другу элементами (с точностью до пикселя), и научит более точно использовать свойства размеров, полей, отступов и границ. Итак, всех приглашаю под кат и погнали!
![](https://habrastorage.org/getpro/habr/upload_files/da6/fd4/0cc/da6fd40cc3b9707b7d88a30640001681.png)
Оглавление
Зачем изучать блочную модель CSS?
![](https://habrastorage.org/getpro/habr/upload_files/80a/2ab/007/80a2ab007f77399939a7f73c7fa11841.png)
Блочная модель CSS состоит из свойств: box-sizing, padding и margin. Если их не использовать, то получим что-то похожее
![Веб-сайт без полей и отступов Веб-сайт без полей и отступов](https://habrastorage.org/getpro/habr/upload_files/441/f22/b2b/441f22b2b680cafc1e673b08618f896a.png)
Но если вы будете правильно использовать свойства блочной модели, ваш сайт будет выглядеть так
![Веб-сайт, использующий свойства блочной модели Веб-сайт, использующий свойства блочной модели](https://habrastorage.org/getpro/habr/upload_files/101/189/2bf/1011892bffd572f05ce5f5e7d3152ee7.png)
Выглядит гораздо более привлекательно, не так ли? Если вы хотите создать свой сайт с точными расчетами, как тот, что указан выше, то вы попали по адресу. Изучение блочной модели CSS - один из многих способов, которые помогут вам сделать веб-сайты, идеальные до пикселя.
В этой статье мы поговорим о том, как использовать эти свойства:
Padding
Margin
Border
box-sizing
Как использовать свойства блочной модели CSS
Давайте посмотрим на несколько примеров, где мы можем использовать свойства блочной модели CSS. Мы собираемся проанализировать сайт, показанный выше.
Давайте внимательнее посмотрим на навигационную панель (navbar). Вы можете заметить разницу между примером, в котором используется свойство padding, и примером, в котором его нет:
![Элементы навигационной панели, использующие свойство padding Элементы навигационной панели, использующие свойство padding](https://habrastorage.org/getpro/habr/upload_files/a8f/ca0/1cb/a8fca01cb333433307765a5e7c1aa93c.png)
Теперь давайте подробнее рассмотрим раздел содержимого вместе с кнопками. Опять же, вы заметите разницу - на правой картинке также используется свойство padding.
![Раздел содержимого, использующий свойство padding Раздел содержимого, использующий свойство padding](https://habrastorage.org/getpro/habr/upload_files/f87/f44/4bc/f87f444bc25a0487cb3bd3f7589b80ef.png)
Структура блочной модели CSS
Говоря о блочной модели, стоит воспринимать её как луковицу. И эта "луковица" имеет 4 слоя:
1 слой: Content
2 слой: Padding
3 слой: Border
4 слой: Margin
1 слой блочной модели: Content
В HTML все ведет себя как ящик с контентом. Давайте вставим контент с изображением котенка.
![Первый слой Первый слой](https://habrastorage.org/getpro/habr/upload_files/d7f/ad8/4a5/d7fad84a50937820fb0b8bd74630fa09.png)
2 слой блочной модели: Padding
Следующий слой блочной модели CSS - это слой заполнения. Он обертывает наш контент следующим образом
![Второй слой Второй слой](https://habrastorage.org/getpro/habr/upload_files/376/abe/18a/376abe18ada076ff3ffe2307366478e7.png)
3 слой блочной модели: Border
Следующий слой блочной модели CSS - это пограничный слой. Он обертывает наш контент + отступы следующим образом
![Черная пунктирная линия - граница Черная пунктирная линия - граница](https://habrastorage.org/getpro/habr/upload_files/96f/b54/e3b/96fb54e3b2ef16763c229889efcee4e9.png)
4 слой блочной модели: Margin
Следующим и последним слоем блочной модели CSS является слой полей. Он обертывает наш контент + отступ + границу следующим образом
![Четвёртый слой Четвёртый слой](https://habrastorage.org/getpro/habr/upload_files/afe/975/404/afe975404bad4c07454385c21b1a6a65.png)
Итак, давайте посмотрим, как эти свойства работают в проекте.
Как настроить проект
![](https://habrastorage.org/getpro/habr/upload_files/3d0/beb/888/3d0beb888b9f4d6ce66b493c8adcc5af.png)
Это руководство подходит для всех, в том числе для новичков. Если вы хотите писать код, выполните следующие действия.
HTML
Откройте VS Code или Codepen.io и напишите этот код внутри тега body:
<div class="box-1"> Box-1 </div>
CSS
Очистите стили нашего браузера по умолчанию
* {
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
Теперь давайте стилизуем наш блок
.box-1 {
width: 300px;
background-color: skyblue;
font-size: 50px;
}
Все готово, приступим к программированию!
![](https://habrastorage.org/getpro/habr/upload_files/b08/993/2b6/b089932b693baad0ed0a7a4c339f2b21.png)
Свойство Padding
Но сначала давайте обсудим практическое использование свойства padding. Затем мы увидим, как использовать это свойство.
Обычно я использую отступы, чтобы оставить пространство между содержимым. Посмотрите на эту навигационную панель
![Элементы навигационной панели, использующие свойство padding Элементы навигационной панели, использующие свойство padding](https://habrastorage.org/getpro/habr/upload_files/37f/a27/d34/37fa27d34c5ad75d1ad98dc60c186b48.png)
Вот вам еще один пример - посмотрите на содержимое ниже с двумя кнопками
![раздел содержимого с использованием свойства заполнения раздел содержимого с использованием свойства заполнения](https://habrastorage.org/getpro/habr/upload_files/38d/881/75e/38d88175e0af4548934b11d8002d67fe.png)
Как использовать свойство padding в CSS
Ниже представлены названия четырех свойств заполнения:
padding-top
padding-right
padding-bottom
padding-left
![Свойства padding Свойства padding](https://habrastorage.org/getpro/habr/upload_files/ba2/497/aff/ba2497affc9e76e15595f55eceb69a76.png)
И помните, что отступы - это пространство, которое вы добавляете поверх основного контента:
![Второй слой Второй слой](https://habrastorage.org/getpro/habr/upload_files/142/81f/d03/14281fd03d6f5cfe453e7d8e355aecd3.png)
Давайте добавим отступы к нашему контенту. Область красного цвета - это отступ
![Область красного цвета - это отступ Область красного цвета - это отступ](https://habrastorage.org/getpro/habr/upload_files/87e/2ef/291/87e2ef291042ae47b535e05f6fd0341f.gif)
Чтобы воссоздать результаты, указанные выше, напишите этот код в свой CSS:
// Padding added on top, right, left, bottom of .box-1
.box-1{
padding : 100px;
}
Откроем консоль разработчика и перейдем в вычисляемый раздел:
![](https://habrastorage.org/getpro/habr/upload_files/279/046/1e5/2790461e5fb59e4e338ceb3d1e1f7075.png)
В самом центре - контент, который 300px в ширину. Посмотрите, вокруг контента мы добавили отступы по 100 пикселей.
Давайте попробуем добавить отступ только к одной стороне нашего контента (только с правой стороны):
![свойство padding-right свойство padding-right](https://habrastorage.org/getpro/habr/upload_files/2f6/0b5/a4a/2f60b5a4a605ad5d293cdc3ab693575a.png)
Чтобы воссоздать результаты, указанные выше, напишите этот код в свой CSS:
.box-1{
padding: 0 100px 0 0;
}
// Or you can use
.box-1{
padding-right: 100px;
}
Теперь откройте вычисляемый раздел в консоли разработчика
![](https://habrastorage.org/getpro/habr/upload_files/c05/46b/2ad/c0546b2ad017b507d18e461992f3a40e.png)
Посмотрите - отступ в 100 пикселей был добавлен только с правой стороны нашего контента, как мы указали.
Свойство Border
Обычно вы будете использовать свойство border при создании кнопок. Вот демонстрация GIF
![Кнопки, использующие свойство Border Кнопки, использующие свойство Border](https://habrastorage.org/getpro/habr/upload_files/3d0/f8d/6be/3d0f8d6bea300820c57f894a97ffe902.gif)
Обратите внимание, как появляется белая рамка вокруг кнопки, когда наводится указатель мыши на кнопку.
Как использовать свойство границы в CSS
И помните, граница - это пространство, добавленное поверх нашего контента + отступа:
![Черная пунктирная линия - граница Черная пунктирная линия - граница](https://habrastorage.org/getpro/habr/upload_files/499/b6a/ed3/499b6aed3b1bcc5eae2f0dd82b3f134b.png)
Есть три важных параметра свойства границы:
border size
border style: solid (сплошная линия) / dotted ("точечная" линия) / dashed (пунктир)
border color
![Синтаксис свойства границы Синтаксис свойства границы](https://habrastorage.org/getpro/habr/upload_files/62c/bd4/9a8/62cbd49a8bae6a8a10609880789e3711.png)
Как я перечислил выше, существует три стиля свойства границы. В этом примере мы будем использовать пунктирный стиль:
![](https://habrastorage.org/getpro/habr/upload_files/ce8/bb7/e10/ce8bb7e104305e0ec9fae8a675086071.png)
Чтобы воссоздать приведенные выше результаты, напишите этот код в своем CSS:
.box-1 {
width: 300px;
font-size: 50px;
padding: 50px;
border: 10px dashed black;
}
Откроем консоль и посмотрим расчеты блочной модели:
![](https://habrastorage.org/getpro/habr/upload_files/c4e/b1d/e02/c4eb1de02052699611e9b0beae789448.png)
Теперь посмотрите на изображение выше - вокруг нашего контента + отступа добавлена граница 10 пикселей.
Свойство Margin
Обычно я использую свойство margin, чтобы добавить отступ между моим контентом и экраном на макете рабочего стола. Посмотрите на эту гифку:
![Добавление отступов на сайт Добавление отступов на сайт](https://habrastorage.org/getpro/habr/upload_files/2ca/496/051/2ca496051674a2495df26a24d322247a.gif)
Обратите внимание, что я добавил поля к левому и правому краям веб-сайта выше
Вот еще один пример использования свойства margin:
![Добавление отступов на сайт Добавление отступов на сайт](https://habrastorage.org/getpro/habr/upload_files/218/c16/135/218c1613575c6c333ff577faf88d820b.gif)
Как использовать свойство margin в CSS
Margin имеет всего четыре свойства поля:
margin-top
margin-right
margin-bottom
margin-left
![Свойства margin Свойства margin](https://habrastorage.org/getpro/habr/upload_files/1a5/907/703/1a5907703aaff57d313eb8a1d176dbcb.png)
И помните, margin - это пространство, добавленное поверх нашего контента + отступы (по padding) + границы:
![Серая область - margin Серая область - margin](https://habrastorage.org/getpro/habr/upload_files/b71/23d/68f/b7123d68f7a9ed9a67c56968fe144b1f.png)
Давайте добавим отступ к нашему контенту. Весь наш набор смещается из-за margin, как в этом GIF:
![Смещение Смещение](https://habrastorage.org/getpro/habr/upload_files/444/d74/a99/444d74a9902e8a647ffe31b12acdc454.gif)
Чтобы воссоздать приведенные выше результаты, напишите этот код в своем CSS:
.box-1 {
padding: 50px;
border: 10px dashed black;
margin: 50px;
}
Можем еще раз проверить расчеты:
![](https://habrastorage.org/getpro/habr/upload_files/e6b/dc9/e3a/e6bdc9e3a0d52372e809f269320ff88f.png)
Посмотрите, вокруг нашего контента + отступов + границы было добавлено поле 50 пикселей .
Давайте попробуем добавить поле только к одной стороне нашего контента (только левой стороне):
![Свойство margin-left Свойство margin-left](https://habrastorage.org/getpro/habr/upload_files/ec8/a8e/7bf/ec8a8e7bfa6fff9d28db12285f588c07.png)
Чтобы воссоздать результаты выше, напишите этот код в своем CSS
.box-1 {
padding: 50px;
border: 10px dashed black;
margin-left: 50px;
}
На консоли мы видим, что поле в 50 пикселей применено только к левой стороне
![](https://habrastorage.org/getpro/habr/upload_files/2c2/c4f/414/2c2c4f4144b5060d4e7add7793213203.png)
Свойство box-sizing
Это свойство определяет, как будут рассчитываться поля, отступы и границы. Есть три типа вычислений (можно называть их свойствами):
border-box
padding-box
content-box
Примечание:
Мы не будем обсуждать padding-box, поскольку его поддерживает только Firefox, и он используется не очень часто.
В чем разница между content-box и border-box в CSS?
И border-box, и content-box работают одинаково. Посмотрите на эти изображения:
![Блоки, использующие свойство border-box Блоки, использующие свойство border-box](https://habrastorage.org/getpro/habr/upload_files/5a9/beb/e5c/5a9bebe5c3c39096f10d884886230774.png)
![Блоки, использующие свойство content-box Блоки, использующие свойство content-box](https://habrastorage.org/getpro/habr/upload_files/125/e0d/2a8/125e0d2a8e1942f1a5dfe91d9157a087.png)
Итак, в чем здесь главное отличие? Разница заметна, когда мы добавляем поля, границу или отступы к нашим блокам.
Когда мы используем box-sizing: content-box, который является значением по умолчанию, он добавит поля, отступы и границы за пределами поля, например:
![Заполнение применяется стандартно Заполнение применяется стандартно](https://habrastorage.org/getpro/habr/upload_files/fac/420/31a/fac42031a3700a153631f6cd2d625c92.gif)
Вы также можете увидеть расчеты здесь:
![Расчеты с content-box Расчеты с content-box](https://habrastorage.org/getpro/habr/upload_files/1a9/8c6/0ea/1a98c60ea741994d42cd0af6b7c70a00.png)
Это означает, что все может выйти из-под контроля, и вы можете получить неожиданный результат. Это означает, что при таком подходе, будет сложно создавать адаптивные веб-сайты. Вместо этого всегда используйте свойство box-sizing: border-box.
Но когда мы используем свойство box-sizing: border-box, оно добавит поля, отступы и границы вовнутрь блока, например:
![Применение вовнутрь блока Применение вовнутрь блока](https://habrastorage.org/getpro/habr/upload_files/5c5/97c/68c/5c597c68cbc63f51d8ec9e41aec1e56d.gif)
В box-sizing: border-box абсолютно точные расчеты HTML - элементов, а это значит, что такой способ является идеальным для создания адаптивных веб-сайтов.
Вы также можете поэкспериментировать со значениями - просто используйте этот код:
* {
box-sizing: border-box;
}
/* Or, Write */
* {
box-sizing: content-box;
}
Заключение
Вот собственно и всё. Для желающих оставлю ссылку на видео-инструкцию к данному уроку от автора (Джоя Шахеба):