css-margin

Внешний отступ, margin, является одним из самых важных и часто используемых свойств в CSS. Это связано с тем, что оно как и свойство padding часто используется для позиционирования элементов.

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

Свойство margin

Представим, что у нас есть 2 изображения в виде блочных элементов, и нам нужно увеличить расстояние между ними.


Для выполнения этой задачи мы можем как увеличить размеры внутреннего, так и внешнего отступов. Представим что нам нужно отдалить изображения на 50 пикселей друг от друга.

Вначале давайте воспользуемся внутренним отступом. Для этого мы пишем следующее CSS правило:

img1 {
border: 1px solid #e3e2e4;
padding-bottom: 24px; }
img2 {
border: 1px solid #e3e2e4;
padding-top: 24px; }

Отступы сверху и снизу я задал по 24 пикселя, так как у нас есть еще рамка толщиной в 1 пиксель. Рамку я добавил лишь для того, чтобы в дальнейшем вы могли наглядно увидеть разницу между внутренним и внешним отступом. В общем, получается следующее: 24+1+24+1=50 пикселей - расстояние между двумя изображениями. Вот как это выглядит на практике:

А теперь, давайте попробуем сделать то же самое при помощи внешнего отступа, margin:

img1 {
border: 1px solid #e3e2e4;
margin-bottom: 24px; }
img2 {
border: 1px solid #e3e2e4;
margin-top: 24px; }

Как вы наверное догадались, margin-bottom - это отступ снизу, а margin-top - сверху. Вот как это выглядит на практике:

Хотя мы и ожидали, что расстояние между 2 изображениями будет равняться 50 пикселям, этого не произошло. Сейчас оно равняется 26 пикселям. А все дело в том, что при соприкосновении двух внешних отступов браузер не суммирует их значения, а выбирает большое из них. Это явление называется конфликтом полей.

Так как же нам поступить? Для получения желаемого результата нам нужно задать одному полю 48 пикселей, а другому - 0.

img1 {
border: 1px solid #e3e2e4;
margin-bottom: 48px; }
img2 {
border: 1px solid #e3e2e4;
margin: 0; }

Вот как это выглядит на практике:

Как видите, все довольно-таки просто.

При задании внешних отступов по бокам (margin-right,left) конфликта полей не происходит.

Margin-top

Как и в случае со свойством padding, внешнему отступу мы можем давать значения для всех 4 сторон. Margin-top отвечает за отступ сверху. Например, для задания внешнего отступа сверху в 20 пикселей, мы пишем следующее правило:

 img {
margin-top: 20px; }

Margin-bottom

Это свойство отвечает за отступ снизу. Для задания отступа снизу в 15 пикселей, мы пишем следующее правило:

 img {
margin-bottom: 15px; }

Margin-right

Данное свойство отвечает за отступ справа. Для задания ему 30 пикселей мы пишем следующее:

 img {
margin-right: 30px; }

Margin-left

Как вы наверное догадались, это свойство отвечает за внешний отступ слева. Для задания 5 пикселей слева мы создаем следующее CSS правило:

 img {
margin-left: 5px; }

Как видите, все довольно-таки просто.

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

Также у нас есть возможность воспользоваться сокращенной записью. При этом значения нужно перечислять через пробел по часовой стрелке (отступ сверху, справа, снизу, слева):

img {
margin: 5px 15px 25px 17px; }

Также если у нас значения сверху и снизу одинаковы, мы можем указать их лишь единожды. Например, представим что отступы сверху и снизу у нас должны быть по 5 пикселей, а по бокам — 7 и 9 пикселей. Тогда мы пишем следующее:

img {
margin: 5px 7px 9px; }

Таким же образом, представим что по бокам у нас — 5 пикселей, а сверху и снизу — 7 и 9 пикселей:

img {
margin: 7px 5px 9px; }

Далее, представим что у нас по бокам должно быть расстояние в 5 пикселей, а сверху и снизу — по 10 пикселей. Тогда мы пишем следующее:

img {
margin: 10px 5px; }

Как видите, сокращенная запись способна сэкономить кучу времени и сделать вашу таблицу стилей более компактной.

Ну что ж, теперь вы знаете как применять свойство margin при верстке сайта.

А на этом у меня все. Надеюсь, данный урок по CSS был для вас полезен. Если это так:

  1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
  2. Подписывайтесь на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

2 Comments

  1. А в чем разница от padding?

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

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

Вы можете использовать следующие теги HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

один × 3 =

Закрыть