Отступы и поля
Поля
Поля - это свободное пространство между блоками. Задавая ширину полей, мы задаём расстояние между блоками. Задаются поля для каждой границы при помощи четырёх свойств:
- margin-top - ширина верхнего поля;
- margin-right - ширина правого поля;
- margin-bottom - ширина нижнего поля;
- margin-left - ширина левого поля.
Также размер всех полей блока можно задать при помощи одного свойства margin. В этом случае значения всех четырёх полей указываются через пробел, причём в том порядке, который задан выше. Сначала ширина верхнего поля, потом правого, далее нижнего и под конец - левого. Например:
div {
margin:5px 10px 8px 9px;
}
Если значения всех полей равны, тогда после слова margin пишется одно значение:
div {
margin:5px;
}
В том случае, если поля попарно равны, свойство margin будет иметь 2 значения:
div {
margin:5px 10px;
}
Причем, первое значение указывается для верхнего и нижнего полей, а второе - для правого и левого. Также можно задать 3 значения для свойства margin, например:
div {
margin:5px 10px 15px;
}
В этом случае первое значение применяется к верхнему полю, второе к левому и правому, а третье - к нижнему.
Поля могут задаваться в любых единицах длины или процентах. Процентное соотношение считается относительно родительского элемента по отношению к блоку.
Отступы
Отступы позволяют отделить содержимое блока от его границ. Относительно каждой стороны можно задать размер отступа, а так как стороны четыре, то и задавать отступ можно:
- padding-top - для верхнего поля;
- padding-right - для правого поля;
- padding-bottom - для нижнего поля;
- padding-left - для левого поля.
Для задания отступов можно использовать сокращённую запись, которая полностью аналогична записи свойства margin. Размеры отступов можно задавать в любых единицах длины или процентах. Проценты вычисляются относительно размеров блока.