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