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

В этой статье мы подробно поговорим о полях (свойство margin) и отступах (свойство padding) элемента.

margin

Поле (margin) — устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.

Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора <body> равное нулю.

Свойство margin позволяет задать величину отступа сразу для всех сторон элемента или определить её только для указанных сторон.

//Синтаксис

margin: [<размер> | <проценты> | auto] {1,4}

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений:

1 — отступы будут установлены одновременно от каждого края элемента.
2 — первое значение устанавливает отступ от верхнего и нижнего краёв, второе — от левого и правого.
3 — первое значение задает отступ от верхнего края, второе — одновременно от левого и правого краёв, а третье — от нижнего края.
4 — поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

padding

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

Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить поля только для указанных сторон.

//Синтаксис

padding: [<размер> | <проценты>] {1, 4}

1 — поля будут установлены одновременно c каждого края элемента.
2 — первое значение устанавливает поля от верхнего и нижнего краёв, второе — от левого и правого.
3 — первое значение задаёт поле от верхнего края, второе — одновременно от левого и правого краёв, а третье — от нижнего края.
4 — поочерёдно устанавливается поля от верхнего, правого, нижнего и левого краёв.

margin-bottom

Устанавливает величину отступа от нижнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента:

//Синтаксис

margin-bottom: <размер> | <проценты> | auto

margin-left

Устанавливает величину отступа от левого края элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента:

//Синтаксис

margin-left: <размер> | <проценты> | auto

margin-right

Устанавливает величину отступа от правого края элемента. Отступом является расстояние от внешнего края правой границы текущего элемента до внутренней границы его родительского элемента:

//Синтаксис

margin-right: <размер> | <проценты> | auto

margin-top

Устанавливает величину отступа от верхнего края элемента. Отступом является расстояние от внешнего края верхней границы текущего элемента до внутренней границы его родительского элемента:

//Синтаксис

margin-top: <размер> | <проценты> | auto

padding-bottom

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

//Синтаксис

padding-bottom: [<размер> | <проценты>]

padding-left

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

//Синтаксис

padding-left: [<размер> | <проценты>]

padding-right

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

//Синтаксис

padding-right: [<размер> | <проценты>]

padding-top

Устанавливает значение поля от верхнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое:

//Синтаксис

padding-top: [<размер> | <проценты>]

Расстояния отступов и полей указываются:

px — в пикселях или любых других допустимых CSS единицах измерения.
% — в процентах.
auto — размер полей и отступов автоматически рассчитывается браузером.

Рассмотрим примеры. Пример 1:

<html>
<head>
<style type='text/css'>
/* Отступ от содержимого элемента до его верхней границы равен 30, до левой 20, до нижней 10 и до правой 40 px. */
.primer1
{
border-style:solid;
padding-top:30px;
padding-left:20px;
padding-bottom:10px;
padding-right:40px;
}
</style>
</head>
<body>
<p class='primer1'>Элемент с заданным внутренним отступом.</p>
</body>
</html>

Пример 2:

<html>
<head>
<style type='text/css'>
.primer2
{
border-style:solid;
border-width:1px;
background-color:red;
}
.primer21
{
border-width:1px;
border-style:solid;
background-color:white;
}  
.primer21
{
margin-top:20px;
margin-bottom:40px;
margin-left:70px;
margin-right:10px;
}
</style>
</head>
<body>
<div class='primer2'>
<p class='primer21'>Элемент с заданным внешним отступом.</p>
<div>
</body>
</html>

Пример 3 (короткая запись):

<html>
<head>
<style type='text/css'>
/* Отступ от содержимого до границы элемента сверху будет равен 60, справа 20, снизу 40, а слева 50 пикселям */
.par1
{
border:2px solid;
padding:60px 20px 40px 50px;
}
/* Отступ от содержимого до границы элемента сверху будет равен 40, слева и справа 30, а снизу 10 */
.par2
{
border:2px solid;
padding:40px 30px 10px;
}
/* Отступ от содержимого до границы элемента сверху и снизу будет равен 40, а слева и справа 30 */
.par3
{
border:2px solid;
padding:40px 30px;
}
</style>
</head>
<body>
<p class='par1'>Внутренний отступ сверху равен 60, справа 20, снизу 40, а слева 50 пикс.</p>
<p class='par2'>Внутренний отступ сверху равен 40, слева и справа 30, а снизу 10 пикс.</p>
<p class='par3'>Внутренний отступ сверху и снизу равен 40, а слева и справа 30 пикс.</p>
</body>
</html>

Пример 4 (короткая запись):

<html>
<head>
<style type='text/css'>
.dv1 
{
border-style:solid;
border-width:1px;
background-color:red;
}
.par1,.par2,.par3
{
border-width:1px;
border-style:solid;
background-color:white;
}  
/* Внешний отступ сверху элемента будет равен 50, справа 20, снизу 40 и слева 50 пикселям */
.par1
{
margin:50px 20px 40px 50px;
}
/* Внешний отступ сверху элемента будет равен 30, слева и справа 40, а снизу 50 пикселям */
.par2
{
margin:30px 40px 50px;
}
/* Внешний отступ сверху и снизу элемента будет равен 30, а слева и справа 50 пикселям */
.par3
{
margin:30px 50px;
}
</style>
</head>
<body>
<div class='dv1'>
<p class='par1'>Внешний отступ сверху равен 100, справа 20, снизу 40 и слева 100 пикселям.</p>
</div>
<br />
<div class='dv1'>
<p class='par2'>Внешний отступ сверху равен 30, слева и справа 40, а снизу 50 пикселям.</p>
</div>
<br />
<div class='dv1'>
<p class='par3'>Внешний отступ сверху и снизу равен 30, а слева и справа 50 пикселям.</p>
</div>
<p><b>Обратите внимание:</b> внешний отступ в данном примере закрашен красным. </p>
</body>
</html>