Пятница, 22 Марта 2013 10:21

СSS свойство margin

Written by 
Оцени эту запись
(1 Голос)

СSS свойство margin задает внешний отступ элемента. Свойство задает величину расстояние от текущего элемента до его родителя.

 

 

 

Пример:

СSS свойство margin

<div style="background: pink">

      <div style="width: 100px; height: 100px; background: yellow; margin: 10px;">

            Text

      </div>

</div>

 

Результат:

 

Text

 

Значением отступов можно задавать в пикселях (px), процентах(%) или auto.

 

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

 

Есть много способов задать внешние отступы элемента, рассмотрим их в таблице:

 

 

Запись Значение Результат
margin: 10px; Отступ со всех сторон по 10px
Text
margin-top: 10px; Отступ сверху 10px
Text
margin-bottom: 10px Отступ снизу 10px
Text
margin-left: 10px; Отступ слева 10px
Text
margin-right: 10px; Отступ справа 10px
Text
margin: 10px 0; Отступ сверху и снизу по 10px
Text
margin: 0 10px; Отступ слева и справа по 10px
Text
margin: 5px 10px 15px 20px; Отступ сверху 5px, справа 10px, снизу 15px, слева 20px
Text
margin: 10px auto; Отступ сверху и снизу по 10px, выравнивание по центру по горизонтали
Text

 

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

 

Отдельно хочу обратить внимание на значение auto. Это значение часто используется для центрирования элемента.

 

<div style="width: 100px; height: 100px; background: blue; color: white; margin: 0 auto;">margin: 0 auto;</div>

 

 

Результат:

 

margin: 0 auto;

 

 

Margin для строчных элементов

 

При задании внешних отступов строчным элементам, вы можете заметить, что они не всегда срабатывают. На самом деле, свойство margin для строчного элемента сработает только по горизонтали. То есть, отступы появятся слева и справа, но их не будет снизу и сверху. Для примера приведу строку текста, в которой одно слово выделено в элемент span(строчный элемент) и ему укажу свойство margin: 20px:

 

 

<p style="background: pink;">Kate-land - <span style="background: yellow; margin: 20px;">блог</span> верстальщика и для верстальщика</p>

 

Результат:

 

 

Kate-land - блог верстальщика и для верстальщика

 

Как видим, горизонтальные отступы появились, а вертикальных нету.

 

Если вам нужно в подобном случае все таки сделать отступ элементу, можно его отобразить блочно-срочным:

 

span {

display: inilie-block;

}

 

Новый результат:

 

 

Kate-land - блог верстальщика и для верстальщика

 

Теперь мы видим отступы со всех сторон, которые и растянули родительский элемент.

 

 

Схлопывание margin

 

Свойство margin, примененное для блочных элементов, тоже не всегда работает. Если элемент блочный и он является первым дочерним своего родителя, то верхний отступ у него не сработает. 

 

 

Text

 

Этот же код я применяла в первом примере. Но чтобы показать все таки верхний отступ, я дочерний элемент сделала строчно-блочным.

 

Также margin не будет складываться, если один под другим идут блочные элементов и верхними и нижними отступами:

 

 

Text
Text

 

Здесь дочерние элементы абсолютно одинаковые. Отступ между ними равен 10px, хотя должно быть 20px - нижний margin у первого 10px + верхний отступ у второго 10px. Данное поведение свойственно только для вертикально расположенных блочных элементов, которые не являются абсолютно спозиционированными (position: absolute) или плавающими (float: left/right).

 

Эти особенности свойства margin называются схлопыванием. Подробнее об этом можно прочитать в статье Схлопывание margin.

 

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов