Поля и отступы в CSS

Поля и отступы играют одну из главных ролей в CSS верстке веб-страниц. Сам смысл CSS-верстки подразумевает расстановку блочных элементов по местам, указанным в макете веб-ресурса. А позиционировать блок с точностью до одного пиксела как раз и помогают свойства CSS определяющие поля и отступы.

Поля — padding определяют расстояние от содержимого блочного элемента до его границы.
Отступы — margin  задают расстояние от границы текущего блока до рамки родительского, или соседнего  элементов.

Поля и отступы

Различные браузеры задают разные отступы (по-умолчанию) от границ своих окон. Поэтому, перед началом верстки желательно обнулить значения полей и отступов: padding:0; margin:o;

Все блочные элементы имеют прямоугольную форму. Значит и значений полей и отступов, тоже четыре по количеству сторон прямоугольника: top, left, bottom и right.

Задавать их можно одним, двумя, тремя и четырьмя значениями.

  1. Одно значение — распространяется на все стороны блока.
  2. Два значения — первое определяет верх и низ, второе — право и лево.
  3. При трех значениях — первое определяет верх, второе — право и лево, а третье значение — нижнее расстояние.
  4. Каждое из четырех значений определяет свое — сверху и по часовой стрелке соответственно.

Единицы измерения, применяемые для обозначения полей и отступов могут быть любыми, из используемых в сети интернет.

Вот несложный пример расположения двух блочных элементов внутри третьего:
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, чтобы прижать его к верхнему краю окна браузера. Но, о позицианировании написано в другом посте.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha