CSS Блочная модель
Курс по основам CSS. W3Schools на русском языке. Уроки для начинающих
CSS Box Model - Блочная модель
Все элементы HTML могут рассматриваться как блоки. В CSS термин "блочная модель" ("box model") используется, когда речь идет о дизайне и верстке.
Блочная модель CSS, по сути, представляет собой коробку, которая охватывает каждый элемент HTML. Он состоит из: полей, границ, отступов и фактического содержимого. Изображение ниже иллюстрирует модель коробки:
Объяснение разных частей:
- Content - Содержимое поля, где появляются текст и изображения
- Padding - Очищает область вокруг содержимого. Отступ (padding) прозрачный
- Border - Граница, которая идет вокруг отступа и содержания
- Margin - Очищает область за пределами границы. Поля (margin) прозрачные
Блочная модель позволяет нам добавлять границы вокруг элементов и определять пространство между элементами.
Пример
Демонстрация блочной модели:
div {
width: 300px;
border: 15px solid
green;
padding: 50px;
margin: 20px;
}
Попробуйте сами »
Ширина и высота элемента
Чтобы правильно установить ширину и высоту элемента во всех браузерах, необходимо знать, как работает блочная модель.
Важно: Когда вы устанавливаете свойства ширины и высоты элемента с помощью CSS, вы просто устанавливаете ширину и высоту области содержимого. Чтобы рассчитать полный размер элемента, вы также должны учесть отступы (padding), границы (border) и поля (margin).
Пример
Этот <div> элемент будет иметь общую ширину 350px:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Попробуйте сами »
Вот расчет:
Общая ширина элемента должна быть рассчитана следующим образом:
Общая ширина элемента = width + left padding + right padding + left border + right border + left margin + right margin
Общая высота элемента должна быть рассчитана следующим образом:
Общая высота элемента = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin