Отступы и поля в CSS.  Свойства margin и padding.
Браузеры



 Краткая информация
                       

     Представьте, вы хотите повесить на стене картинку, которую вставили в рамочку. Расстояние по вертикали и горизонтали от края картинки до рамки - это padding, а расстояние от рамки до потолка, пола, левой и правой стены, или же расстояние до другой картинки - это margin, сама же рамка - это border.

margin
     Устанавливает величину отступа от каждого края элемента. Отступом является расстояние по вертикали, или горизонтали, от внешнего края рамки текущего элемента до внутренней границы родительского элемента, или до внешнего края элемента, который расположен рядом с текущим элементом.

margin-top -        свойство, создающее поле сверху.
margin-right -     свойство, создающее поле справа.
margin-bottom - свойство, создающее поле снизу.
margin-left -        свойство, создающее поле слева.

     Единицами измерения могут быть пиксели (px), сантиметры (cm), процентное соотношение (%), и т.д.

     Записывается свойство так: margin:10px 5px 15px 20px;

Где 10px - поле сверху, 5px - поле справа, 15px - поле снизу, 20px - поле слева.
Запись начинается с верхнего поля, и по часовой стрелке.
Если значения каких-то полей совпадают, то применяется сокращенная запись:

margin:10px 5px 15px 20px;                   Верхнее поле - 10px
                                                                   Правое поле -   5px
                                                                   Нижнее поле -  15px
                                                                   Левое поле -     20px

margin:10px 5px 15px;                            Верхнее поле - 10px
                                                                   Правое и левое поле - 5px
                                                                   Нижнее поле - 15px

margin:10px 5px;                                      Верхнее и нижнее поле - 10px
                                                                    Правое и левое поле - 5px

margin:10px;                                             Все 4 поля по 10px

      Если же  вы хотите изменить какое-то одно значение, например отступ слева, то, пишем так:  
margin-left:10px; 

      Если вы хотите "вылезть" за границу блока, то применяются отрицательные значения:  
margin-left:-10px;
Объединение вертикальных полей. Схлопывание.


Представьте ситуацию: два блочных элемента находятся друг над другом и им заданы поля margin. Для верхнего блока установлено значение margin: 60px, а для нижнего – margin: 30px. Логично было бы предположить, что два граничащих поля двух элементов просто соприкоснутся и в итоге промежуток между блоками будет равен 90 пикселям.

Однако дела обстоят по-другому. На самом деле в такой ситуации проявляется эффект, который называют схлопыванием, когда из двух примыкающих полей элементов выбирается наибольший по размеру. В нашем примере итоговый промежуток между элементами будет равен 60 пикселям.



    Схлопывание margin работает только для верхних и нижних полей элементов и не относится к полям с правой и левой сторон. Окончательная величина промежутка высчитывается в разных ситуациях по-разному:
  • Когда оба значения margin положительные, итоговый размер поля будет равен бóльшему значению.
  • Если одно из значений является отрицательным, то для вычисления размера поля нужно получить сумму значений. Например, при значениях 20px и -18px размер поля будет равен: 20 + (-18) = 20 — 18 = 2 пикселя.
  • Если оба значения отрицательные, сравниваются модули этих чисел и выбирается число, бóльшее по модулю (следовательно, меньшее из отрицательных чисел). Пример: необходимо сравнить значения полей -6px и -8px. Модули сравниваемых чисел равны 6 и 8 соответственно. Отсюда следует, что 6 < 8, то есть, -6 > -8. Итоговый размер поля равен -8 пикселей.
  • В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
  • Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.

padding
     Устанавливает расстояние, или внутренний отступ, между внутренним краем рамки элемента и его содержимым. Обратите внимание, что добавление внутренних полей будет влиять на общий размер элемента.

 padding-top -        свойство, создающие поля сверху.
padding-right -     свойство, создающие поля справа.
padding-bottom - свойство, создающие поля снизу.
padding-left -        свойство, создающие поля слева.

 Единицами измерения могут быть пиксели (px), сантиметры (cm), процентное соотношение (%), и т.д.

Записывается свойство так: padding:10px 5px 15px 20px;

Где 10px - поле сверху, 5px - поле справа, 15px - поле снизу, 20px - поле слева.

Запись начинается с верхнего поля, и по часовой стрелке.
Записывается свойство так: padding:10px 5px 15px 20px;

Где 10px - поле сверху, 5px - поле справа, 15px - поле снизу, 20px - поле слева.

Запись начинается с верхнего поля, и по часовой стрелке.
Если значения каких-то полей совпадают, то применяется сокращенная запись:

padding:10px 5px 15px 20px;                 Верхнее поле - 10px
                                                                   Правое поле -   5px
                                                                   Нижнее поле -  15px
                                                                   Левое поле -     20px


 padding:10px 5px 15px;                          Верхнее поле - 10px
                                                                   Правое и левое поле - 5px
                                                                   Нижнее поле - 15px

 padding:10px 5px;                                    Верхнее и нижнее поле - 10px
                                                                    Правое и левое поле - 5px

 padding:10px;                                           Все 4 поля по 10px