Поля и отступы играют одну из главных ролей в CSS верстке веб-страниц. Сам смысл CSS-верстки подразумевает расстановку блочных элементов по местам, указанным в макете веб-ресурса. А позиционировать блок с точностью до одного пиксела как раз и помогают свойства CSS определяющие поля и отступы.
Поля — padding определяют расстояние от содержимого блочного элемента до его границы.
Отступы — margin задают расстояние от границы текущего блока до рамки родительского, или соседнего элементов.
Различные браузеры задают разные отступы (по-умолчанию) от границ своих окон. Поэтому, перед началом верстки желательно обнулить значения полей и отступов: padding:0; margin:o;
Все блочные элементы имеют прямоугольную форму. Значит и значений полей и отступов, тоже четыре по количеству сторон прямоугольника: top, left, bottom и right.
Задавать их можно одним, двумя, тремя и четырьмя значениями.
- Одно значение — распространяется на все стороны блока.
- Два значения — первое определяет верх и низ, второе — право и лево.
- При трех значениях — первое определяет верх, второе — право и лево, а третье значение — нижнее расстояние.
- Каждое из четырех значений определяет свое — сверху и по часовой стрелке соответственно.
Единицы измерения, применяемые для обозначения полей и отступов могут быть любыми, из используемых в сети интернет.
Вот несложный пример расположения двух блочных элементов внутри третьего:
HTML — код:
<body>
<body>
<div id="r">
<p>Поля и отступы в параграфе</p>
<div id="c">Содержание блока Содержание блока Содержание блока Содержание блока</div>
</div>
</body>
</body>
CSS правила:
<style>
body,div {
margin:0;
padding:0;
}
#r {
position:absolute;
background-color:#3FC;
width: 400px;
height: 350px;
}
P {
background-color:#FF0;
border:#666;
border:solid;
width: 270px;
padding: 10px 20px;
margin-left: 15px;
margin-top: 25px;
}
#c {
background-color:#F69;
width:auto;
height:auto;
text-align:justify;
margin-left: 35px;
margin-top: 85px;
margin-right:120px;
padding: 20px 30px 10px 50px;
}
</style>
А вот скриншот того, что вышло:
На рисунке все наглядно видно. Поля и отступы специально взяты различные и заданы разными способами. Блок поставлен в позицию position:absolute, чтобы прижать его к верхнему краю окна браузера. Но, о позицианировании написано в другом посте.
