Свойства margin и padding чаще всего используются для выделения элементов. Поле margin — это пространство снаружи чего-либо, а отступ padding — это пространство внутри чего-либо.
Измените CSS-код для h2 на следующий:
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 20px;
padding: 40px;
}Это оставляет пространство шириной 20 пикселей вокруг дополнительного заголовка, а сам заголовок становится жирным из-за заполнения шириной 40 пикселей.
Четыре стороны элемента также можно задать по отдельности. Свойства margin-top, margin-right margin-bottom margin-left, padding-top padding-right padding-bottompadding-left ─ это понятные свойства, которые вы можете использовать.
Модель коробки box
Поля, отступы и границы (см. следующую страницу) являются частью так называемой коробочной модели.
Прямоугольная модель работает следующим образом: в середине у вас есть область содержимого (скажем, изображение), вокруг которой у вас есть отступ, вокруг которой у вас есть граница и вокруг которой у вас есть поле. Это может быть визуально представлено следующим образом:
Вам не обязательно использовать всё это, но может быть полезно помнить, что модель box может быть применена к каждому элементу на странице, и это мощная вещь!
Страницы в тему:
- Следующая страница: Границы
- Предыдущая страница: Текст
- Сокращённые свойства ─ Как использовать поля и отступы для указания разных значений top, right, bottom и left в одном свойстве (Продвинутый урок CSS)
- Свойство CSS: margin
- Свойство CSS: padding
