Модель блока
На странице HTML элемент (он может содержать другие элементы внутри) создает прямоугольную рамку. Это описывается как модель CSS Bo.
Есть несколько свойств CSS, которые работают по отношению к модели CSS Box.
Размеры
Модель CSS Box имеет три измерения: заполнение, границу и поле в том порядке, в котором они указаны относительно фактического содержимого.
На следующем рисунке поясняется концепция заполнения, границы и поля.
отступ — это область рядом с фактическим содержимым.
Граница — это область рядом с отступом. В качестве альтернативы можно сказать, что это область между отступом и полем.
Поле — это область рядом с границей.
Свойства padding, border и margin. может применяться по отношению к верхнему, левому, нижнему и правому краям связанного элемента. Следующее изображение поясняет, что:
На следующем рисунке показано содержимое, отступы, границы и края полей:
Содержимое край
край заполнения
край границы
——— край поля
Факты, которые вы должны понимать и помнить
- Блочная модель CSS применяется только к блочным элементам, а не к встроенным элементам.
- Когда элемент отображается в веб-браузере, его ширина/высота составляет: (ширина | высота) поле + граница + отступ. Помните, что на ширину влияют отступы слева и справа, границы и поля, на высоту — верхнее и нижнее отступы, границы и поля.
-
- Когда два элемента блока лежат рядом друг с другом и если их поле больше нуля, применяется только большее из двух полей. См. Изображение ниже:
-
