Padding и ширина элемента
Свойство CSS width задаёт ширину области содержимого элемента. Область содержимого — это часть внутри отступа (padding), рамки (border) и внешнего отступа (margin) (блочная модель).
Поэтому, если у элемента задана ширина, любой отступ добавляется поверх этой ширины. Часто это не то, что нужно.
Например, <div> шириной 300px и отступом 25px фактически занимает 350px (300 + 25 + 25).
Пример
Заданная ширина — 300px, но отступ увеличивает общую ширину до 350px.
<style> задайте <div> ширину 300px и отступ 25px, плюс рамку и фон. Фактическая ширина становится 350px (300 + 25 + 25). Поместите внутрь текст.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 300px;
padding: 25px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>The set width is 300px, but the padding makes the total width 350px.</div>
</body>
</html>
Padding и box-sizing
Свойство box-sizing определяет, как рассчитываются ширина и высота элемента: включают ли они отступ и рамку или нет.
Оно может принимать следующие значения:
content-box— значение по умолчанию. Ширина и высота охватывают только содержимое, без отступа и рамки.border-box— ширина и высота охватывают содержимое, отступ и рамку.
Поэтому, чтобы сохранить ширину 300px независимо от отступа, используйте box-sizing: border-box. Элемент сохраняет свою общую ширину, а больший отступ просто оставляет меньше места для содержимого.
Пример
При box-sizing: border-box общая ширина остаётся 300px даже с отступом.
<style> задайте <div> ширину 300px, отступ 25px и box-sizing: border-box, плюс рамку и фон. Общая ширина остаётся 300px. Поместите внутрь текст.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>With box-sizing: border-box, the total width stays 300px even with padding.</div>
</body>
</html>
Все CSS-свойства padding
Краткий обзор свойств отступа:
padding— задаёт весь отступ в одном объявлении.padding-bottom— задаёт отступ снизу.padding-left— задаёт отступ слева.padding-right— задаёт отступ справа.padding-top— задаёт отступ сверху.