В каскадных таблицах стилей, для настройки отступов используют два свойства - margin и padding. Давайте разберемся, как они работают.
Margin
Мы помним о том, что на данный момент актуальная блочная модель документа. И для каждого из блоков мы можем настроить внешний отступ от края страницы, или его родительского элемента. Все зависит от того, в каком месте html потока данный блок расположен. Мы будем работать с блоком DIV.
Вам пригодится: div верстка.
В css свойство для внешнего отступа margin, можно задать отдельно для каждой из четырех сторон блока. Свойство имеет следующие значения:
- [значение | проценты | auto] - укажите параметр отступа цифрой, в процентах, или оставьте значение auto
- Для каждой стороны {1-4} - в этом варианте указания отступа, можно указывать значения одним из четырех возможных вариантов. 1) Единое значения для каждой стороны. 2) Сначала для верхней и нижней части блока одновременно, затем также для правой и левой части. 3) Здесь вы задаете отступ от верхнего края строки или родительского элемента, затем одновременно для левой и правой части блока, и в завершении для нижней. 4) Здесь поочередно устанавливайте отступы для каждой стороны - вверх, право, низ, лево.
Синтаксис свойства margin выглядит вот так:
div { margin: 10px 10px 10px 10px; margin-left:5%; margin-right: 0.8; margin-top: auto; margin-bottom: 15px; }
Вы можете назначать отступ для каждой стороны отдельно, явно указав ее в свойстве margin.
Таким образом, используйте это CSS свойство, чтобы задать отступ для элемента от края страницы, строки, блока или родительского контейнера.
Padding
Аналогичное CSS свойство, назначает внутренние отступы в блоке. С помощью padding, вы можете задать отступ от содержимого блока, до его границы.
Значения задаются аналогично свойству margin. Вот так выглядит синтаксис:
div { padding: 10px 10px 10px 10px; padding-left:5%; padding-right: 0.8; padding-top: auto; padding-bottom: 15px; }
Мы можем применять эти два свойства в следующих ситуациях:
- Отступ между строками,,k реализованный через CSS
- Отступ от края страницы
- Для внутренних отступов для любого элемента