Домой / Учебник Css / 8 Урок. Отступы margin и padding

8 Урок. Отступы margin и padding

В css можно очень просто делать отступы от элемента до других, соседних. Кроме того, можно сделать отступы внутри элемента.. Сейчас посмотрим, что к чему.

В css существует два свойства для отступа:

  • margin - отступ от границ элементов до границ соседних элементов. Задается в пикселах или процентах.
  • padding - отступ внутри одного элемента. Задается в пикселах или процентах.

Посмотрим на картинку, где схематично показаны различия этих отступов:

Отличия margin и padding
Отличия margin и padding

Читайте дальше, и все станет понятно 🙂

Отступы margin в css

Давайте посмотрим, как ведет себя margin на странице на примере заголовка h1.

Html часть:

<HTML>
  <head>
    <title>Моя страница</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Заголовок</h1>
    <p>
      Светило яркое солнышко. Под сосной у реки была барсучья нора.
      У норы сидел барсук. Вот зверек издал слабый звук.
      Из темной норы стали выползать барсучата.
    </p>
  </body>
</HTML>

Css часть:

h1
{
border: 1px solid red;
margin: 50px;
}

Тут я еще задал красную рамку для заголовка, чтобы лучше были видны все отступы.

Вот что получается:

Отступ margin в css
Отступ margin в css

Как видим, от границ заголовка было отступлено 50 пикселей до всего, что находится рядом. Даже до границ окна браузера.

А вот что будет без отступа margin:

Без отступа margin

Точно так же задается отступ в процентах:

h1
{
border: 1px solid red;
margin: 10%;
}

Отступ padding в css

Отступ padding уже подразумевает отступ внутри элемента. То есть от самогО элемента до начала его границ. Давайте посмотрим пример все с тем же заголовком.

Css часть:

h1
{
border: 1px solid red;
padding: 30px;
}

Результат:

Отступ padding в css
Отступ padding в css

Разный отступ с каждой стороны

Выше мы рассмотрели, как делать отступы в css сразу со всех сторон. Но можно также и сделать отступ только с одной стороны.

Свойства css:

  • margin-top - отступ сверху;
  • margin-right - отступ справа;
  • margin-bottom - отступ снизу;
  • margin-left - отступ слева.

 

Css часть:

h1
{
border: 1px solid red;
margin-top: 30px;
margin-right: 22px;
margin-bottom: 85px;
margin-left: 40px;
}

Каждой стороне мы задали свой размер отступа. Вот как это будет выглядеть:

Задаем сторону отступа

 

Можно задать отступ только к одной стороне, а можно сразу ко всем (свойством margin), а уже к какой-то одной стороне задать отдельный размер отступа. Это уже на ваше усмотрение.

Для отступа внутри элемента (padding) действует все то же самое, что описано выше.

Сокращаем запись

Если нам нужно задать разный размер отступа для каждой стороны, то в css не обязательно писать все 4 стороны, достаточно написать один раз свойство, а значения задать сразу для всех сторон (через пробел).

Вот как это выглядит:

margin: сверху справа снизу слева;

Обратите внимание - 4 этих значения имеют свои строгие стороны:

  • первое значение - отступ сверху;
  • второе значение - отступ справа;
  • третье значение - отступ снизу;
  • пятое значение - отступ слева.

То есть идет сверху - и по часовой стрелке. Посмотрим пример, как это записывается в коде css:

margin: 1px 20px 60px 10px;

После числа пишем px, не забываем. Иначе отступ может не работать.

Все вышесказанное работает также и для padding.

Отрицательные значения в отступах

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

Css часть:

h1
{
border: 1px solid red;
margin-bottom: -25px;
}

Мы задали отрицательное значение отступа снизу для заголовка. Теперь от нижней границы заголовка до нижнего текста не просто нулевой отступ, а отрицательный. Поэтому текст снизу залезает на заголовок:

Отрицательный отступ в css
Отрицательный отступ в css

Заключение

Таким образом отступы в css можно настроить очень четко и точно, очень гибкие настройки, в зависимости от Ваших нужд.

Такие отступы можно давать любому элементу html, будь то картинка, или блок div.

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

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