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

В этой статье мы подробно поговорим о полях (свойство 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>


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

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

CSS-фреймворки созданы для упрощения работы верстальщика, исключения ошибок при создании проекта и избавления от скучного монотонного написания одного и того же кода. Верстальщики получают продуманные

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: