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

Каждый разработчик CSS во многих случаях использует блочную модель для внесения изменений в элементы HTML с помощью некоторых свойств CSS. Блочная модель – это блок или контейнер, который окружает элементы HTML. Он также содержит несколько свойств, а именно:

  • Допуск
  • Граница
  • Заполнение и
  • Актуальное содержание

Фактическое содержание будет началом этого объяснения, потому что все остальные обернуты вокруг него.

content – это любой элемент HTML, отображаемый в браузере.

<div class="contianer">
  <h1>This is a content</h1>
</div>

Padding – это прозрачное пространство вокруг HTML-элементов, которые являются содержимым. Оно обеспечивает пространство рядом с элементом, в зависимости от значения заполнения.

.container{
    padding: 20px;
}

Граница, что также очень важно, — это линии, служащие рамкой или контейнером, который обертывает/закрывает отступы и содержимое, защищая его от внешних препятствий.

.conainer{
    border: 2px solid black;
}

Наконец, margin – это прозрачное пространство снаружи и вокруг границы, которое используется для отделения ее от других элементов в браузере. Отступы и поля имеют сходства и различия. Их сходство заключается в том, что они оба являются прозрачными пространствами, а разница в том, что они находятся в разных положениях.

.container{
    margin: 20px;
}

Мы должны внимательно изучить, как работает блочная модель.