CSS блочная модель - httpdoc.ru

CSS Блочная модель (Box Model)

Модель CSS Box Model - самая важная концепция при разработке веб-сайтов. Это комбинация различных свойств CSS, которые вместе образуют коробку, следовательно, модель коробки.

Согласно блочной модели CSS, движок браузера представляет каждый элемент в HTML как коробку. Это поле представляет собой сочетание элемента content , padding , margins и borders .

Попробуем разобраться в изображении ниже:

Коробочная модель CSS

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

Изменения в содержимом, отступах и границах влияют на размер контейнера, даже если его размер фиксирован. Поля, с другой стороны, освобождают внешнее пространство для контейнера. Все эти свойства вместе создают CSS Box.


Размер CSS-бокса

Когда вы устанавливаете размер любого элемента в CSS Box Model, это не фактический размер этого элемента. Вы просто устанавливаете высоту и ширину содержимого внутри элемента. Фактический размер элемента будет состоять из content + padding + margins и borders .

Посмотрите, как ширина и высота элемента определяется браузером:

Общая ширина: content + padding-left + padding-right + border-left + border-right + margin-left + margin-right.

Общая высота: content + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

Давайте посмотрим краткое описание всех этих свойств в таблице ниже:

Элементы блочной модели CSS

Ценить Описание
Область содержимого Любая информация, присутствующая внутри контейнера, является содержимым. Это может быть текст, изображение, видео и так далее.
Обивка Это пространство между содержимым и границами контейнера. Работает внутри контейнера. Его можно настроить индивидуально для всех четырех сторон.
Граница Рамка помещается вокруг отступа и содержимого. Его можно отрегулировать для всех четырех сторон контейнера. Его можно стилизовать по ширине, цвету и углам.
Прибыль Он управляет территорией за пределами границы. Его можно настроить для всех сторон индивидуально.

Посмотрите на пример ниже и обратите внимание на использование отступов, границ и полей.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Box Model </title> 
  <meta charset="UTF-8">
<style>
div {
 background-color: #e3fdcb;
 width: 300px;
 border: 10px solid seagreen;
 padding: 25px;
 margin: 25px;
 }
</style>
</head>

<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. 
It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the actual content of the box. We have added a 25px padding, 
25px margin and a 25px green border. </div>
</body>
</html>

Выход

CSS Box Model
Этот текст и есть фактическое содержимое коробки. Мы добавили отступ 25 пикселей, поле 25 пикселей и зеленую границу 25 пикселей. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum.