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

Модель коробки

На странице HTML элемент (он может содержать другие элементы внутри него) генерирует прямоугольное поле. Это описано как CSS Bo Model.

Есть несколько свойств CSS, которые работают в отношении CSS Box Model.

Размеры

Блочная модель CSS имеет три измерения: отступы, границы и поля в том порядке, в котором они расположены относительно фактического содержимого.

Следующая картинка поясняет концепцию отступов, границ и полей.

отступ - область рядом с фактическим содержанием.

Граница - это область рядом с отступом. В качестве альтернативы вы можете сказать, что это область между отступом и полем.

Поле - это область рядом с границей.

Свойства padding, border и margin могут быть применены относительно верхнего, левого, нижнего и правого связанных элементов. Следующая картинка поясняет, что:

На следующем рисунке показаны содержимое, отступы, границы и края полей:

-------- край поля

Факты, которые вы должны понимать и помнить

• Блочная модель CSS применяется только к блочным элементам, а не к встроенным элементам.
• Когда элемент отображается в веб-браузере, его ширина / высота: (ширина | высота) поле + рамка + отступы. Помните, что ширина зависит от левого и правого заполнения, границы и поля, высота зависит от верхнего и нижнего заполнения, границы и поля.
• 
• Когда два элемента блока лежат рядом друг с другом и если их поле больше нуля, применяется только большее из двух полей. Смотрите картинку ниже:
• 

Предыдущая: Специфика CSS
Далее: CSS селекторы