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

admin 13.02.2017 Учебник Css Оставить комментарий 563 Просмотры

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

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

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;
}

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

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

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

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

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

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

Отступ padding в css

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

Css часть:

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

Результат:

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

Выше мы рассмотрели, как делать отступы в 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;
}

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