CSS
Маржа

Синтаксис

• margin: <top & right & bottom & left> ;
• margin: <top> , <left & right> , <bottom> ;
• margin: <top & bottom> , <left & right> ;
• margin: <top> , <right> , <bottom> , <left> ;
• margin-top: <top> ;
• margin-right: <right> ;
• margin-bottom: <bottom> ;
• margin-left: <left> ;

параметры

замечания

Применить маржу на данной стороне

Свойства, специфичные для направления

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

• margin-left
• margin-right
• margin-top
• margin-bottom

В следующем коде применяется край 30 пикселей в левой части выбранного div. Просмотреть результат

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin-left: 30px;
    height: 40px;
    width: 40px;
    background-color: red;
}

Указание направления использования сокращенной собственности

Свойство стандартного margin можно расширить, чтобы указать разные ширины для каждой стороны выбранных элементов. Синтаксис для этого заключается в следующем:

margin: <top> <right> <bottom> <left>;

В следующем примере применяется маркер нулевой ширины к вершине div, к краю 10px с правой стороны, к краю 50px с левой стороны и к краю 100px с левой стороны. Просмотреть результат

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin: 0 10px 50px 100px;
    height: 40px;
    width: 40px;
    background-color: red;
}

Свертывание маржи

Когда два поля касаются друг друга вертикально, они обрушиваются. Когда два поля касаются горизонтально, они не разрушаются.

Пример смежных вертикальных полей:

Рассмотрим следующие стили и разметку:

div{
    margin: 10px;
}

<div>
    some content
</div>
<div>
    some more content
</div>

Они будут на 10 пикселей друг от друга, так как вертикальные поля рушится над одним и другим. (Интервал не будет суммой двух полей.)

Пример смежных горизонтальных полей:

Рассмотрим следующие стили и разметку:

span{
    margin: 10px;
}

<span>some</span><span>content</span>

Они будут 20px друг от друга, поскольку горизонтальные поля не разваливаются над одним и другим. (Интервал будет суммой двух полей.)

Перекрытие с различными размерами

.top{
    margin: 10px;
}
.bottom{
    margin: 15px;
}

<div class="top">
    some content
</div>
<div class="bottom">
    some more content
</div>

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

Полученная граница перекрытия

.outer-top{
    margin: 10px;
}
.inner-top{
    margin: 15px;
}
.outer-bottom{
    margin: 20px;
}
.inner-bottom{
    margin: 25px;
}

<div class="outer-top">
    <div class="inner-top">
        some content
    </div>
</div>
<div class="outer-bottom">
    <div class="inner-bottom">
        some more content
    </div>
</div>

Каким будет расстояние между двумя текстами? (наведите указатель мыши на ответ)

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

Теперь, как насчет того, добавим ли мы границы к разметке выше.

div{
    border: 1px solid red;
}

Каким будет расстояние между двумя текстами? (наведите указатель мыши на ответ)

Интервал будет 59 пикселей! Теперь только поля .outer-top и .outer-bottom касаются друг друга и являются единственными сложенными полями. Остальные поля разделяются границами. Итак, мы имеем 1px + 10px + 1px + 15px + 20px + 1px + 25px + 1px. (1px - это границы ...)

Сводные поля между родительскими и дочерними элементами:

HTML:

<h1>Title</h1>
<div>
  <p>Paragraph</p>
</div>

CSS

h1 {
  margin: 0;
  background: #cff;
}
div {
  margin: 50px 0 0 0;
  background: #cfc;
}
p {
  margin: 25px 0 0 0;
  background: #cf9;
}

В приведенном выше примере применяется только самый большой запас. Возможно, вы ожидали, что абзац будет расположен 60px из h1 (так как элемент div имеет верхнюю границу поля в 40px, а p имеет верхний край 20px). Этого не происходит, потому что поля сворачиваются вместе, чтобы сформировать один запас.

Горизонтальные элементы центра на странице с использованием поля

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

Мы добавляем значение ширины, которое меньше ширины окна, и свойство auto margin затем распределяет оставшееся пространство влево и вправо:

#myDiv {
 width:80%;
 margin:0 auto;
}

В приведенном выше примере мы используем объявление сокращенного margin чтобы сначала установить 0 в верхние и нижние значения полей (хотя это может быть любое значение), а затем мы используем auto чтобы браузер автоматически выделил пространство влево и вправо.

В приведенном выше примере элемент #myDiv имеет ширину 80%, что оставляет 20% оставшегося. Браузер распространяет это значение на оставшиеся стороны так:

(100% - 80%) / 2 = 10%

Упрощение маржинальной собственности

p {
    margin:1px;                /* 1px margin in all directions */
    
    /*equals to:*/
    
    margin:1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px 1px;
}

Другой пример:

p{
    margin:10px 15px;        /* 10px margin-top & bottom And 15px margin-right & left*/
    
    /*equals to:*/
    
    margin:10px 15px 10px 15px;
    
    /*equals to:*/
    
    margin:10px 15px 10px;
    /* margin left will be calculated from the margin right value (=15px) */
}

Отрицательные поля

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

div{
  display: inline;
}

#over{
  margin-left: -20px;
}

<div>Base div</div>
<div id="over">Overlapping div</div>

Пример 1:

Очевидно, что процентное значение маржи по отношению к margin-left и margin-right будет относиться к его родительскому элементу.

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px */
}

Но это не тот случай, когда приходит margin-top и margin-bottom . Оба этих свойства в процентах не относятся к высоте родительского контейнера, а к ширине родительского контейнера.

Так,

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px  */
    margin-top: 20%;   /* (parentWidth * 20/100) => 100px */
}