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

Модель блока

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

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

Размеры

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

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

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

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

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

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

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


Содержимое край


край заполнения


край границы

——— край поля

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

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