Отступы являются важным элементом веб-дизайна, влияющим на читаемость и визуальную структуру страницы. Рассмотрим основные способы управления отступами.
Содержание
Основные свойства для управления отступами
| Свойство CSS | Назначение |
| margin | Внешние отступы элемента |
| padding | Внутренние отступы элемента |
| text-indent | Отступ первой строки текста |
Изменение внешних отступов (margin)
Способы задания margin:
- margin: 10px - все стороны
- margin: 10px 20px - верх/низ и право/лево
- margin: 5px 10px 15px 20px - верх, право, низ, лево
- margin-top, margin-right и т.д. - отдельные стороны
Пример использования:
p { margin: 20px 0;
}Изменение внутренних отступов (padding)
| Синтаксис | Результат |
| padding: 15px | 15px со всех сторон |
| padding: 10px 5% | 10px сверху/снизу, 5% слева/справа |
| padding-left: 2em | Левый отступ 2em |
Отступ первой строки (text-indent)
- Положительное значение - отступ внутрь
- Отрицательное значение - выступ наружу
- Может задаваться в px, em, rem, %
Примеры:
- text-indent: 30px - стандартный абзац
- text-indent: -20px - висячая строка
- text-indent: 2em - относительный отступ
Единицы измерения для отступов
| Единица | Описание |
| px | Пиксели (фиксированный размер) |
| em | Относительно размера шрифта |
| rem | Относительно корневого шрифта |
| % | Процент от ширины родителя |
Особенности работы с отступами
- Схлопывание margin у соседних элементов
- Влияние box-sizing на расчет размеров
- Разные отступы для inline и block элементов
- Использование margin: auto для центрирования
Правильное использование отступов позволяет создавать гармоничную и удобную для восприятия структуру веб-страницы.
