Значение и возможности Margin в CSS

Magrin в CSS регулирует внешние отступы элементов. Элементы в html — это прямоугольники. Они имеют границы, поля и отступы.

Область полей (margin) — пространство за пределами границ элемента. Свойство используется для задавания расстояния между элементами и позиционирования их на странице.

Отступы

Свойство Margin в CSS может иметь значение в %, px, vh/vw, em и rem. Значение Margin может наследоваться от родительского элемента (inherit) или автоматически рассчитываться браузером (auto). Значения для Margin в CSS можно прописать множеством способов (приведены примеры в em — масштабируемых единицах, зависящих от размера шрифта элемента).

Способы задания значения отступам:

• для каждой из сторон (top, right, bottom, left) элемента (например, указано значение верхнего внешнего отступа от края элемента center);

.center {
margin-top: 1em;
}

• для противоположных сторон (сначала указывается значение для top и bottom, потом для left и right);

.center {
margin: 1em, 0.5em;
}

• для трех сторон (первым указывается значение для margin-top, вторым - для left и right, третьим - для bottom);

.center {
margin: 0em 1.1em 2em;
}

• для каждой стороны можно указать значения поочередно (margin-top, margin-right и т. д.) или в одну строку от top до left по часовой стрелке;

.center {
margin: 0.5em 1em 1.5em 2em;
}

• значение элемента margin может быть одинаково для каждой стороны;

.center {
margin: 1em;
}

• значение для margin может быть не задано;

• значение margin может быть отрицательным, например, в CSS margin-top с отрицательным значением перемещает элемент вверх;

.center {
margin-top: -1em;
}

• отрицательное значение margin может быть у всех сторон элемента, и тогда он "высвобождает" место для окружающих его элементов снизу и справа и "наезжает" на левый и верхний элементы;

.center {
margin: -1em;
}

Отрицательный отступ

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

.first {
    background-color: white;
    border: 0.06vw solid gold;
    box-shadow: 0 0 0.09vw gold;
    width: 50vw;  
    padding: 2vw;
    margin-bottom: -1vw;  
    margin-left: -9vw;
}
.second {
    background-color: black;
    color: white;
    font-size: 0.7rem;
    width: 10vw;
    padding: 0.5vw;
    margin-left: 27vw;
}

С помощью отрицательных margin-left и margin-top можно "сдвинуть" элемент влево или вверх. Если на месте, куда перемещается элемент, уже есть объекты, тогда он их перекрывает.

Margin-bottom и margin-right не влияют на положение элемента, к которому применяются, но для других объектов он становится меньше. Благодаря этому на картинке блок с именем автора цитаты "залез" на блок с цитатой.

Auto и inherit

Использование auto в CSS у margin и text-align со значением center оказывают схожее действие. Auto центрирует элемент по горизонтали на равном расстоянии от границ контейнера.

До указания значения auto элементы располагаются друг за другом без внешних отступов (если не указано другое значение margin) так же, как они расположены при нулевом margin. После указания значения center смещается к центру ряда.

.center {
margin: auto;
}

Использование значения inherit подразумевает наследование значения от элемента-родителя. Допустим, родительскому элементу прописано значение в CSS margin-left, у элемента center стоит значение, указанное в предыдущем примере.

body {
margin-top: 1em;
}

.center {
margin: auto;
}

Родительский элемент, в который вложены все остальные элементы, сместился чуть ниже относительно своего старого положения. Если изменить у элемента center значение margin на наследуемое, то в результате центрирование исчезнет, а объект, который наследует свойство, таким же образом сместится вниз.

body {
margin-top: 1em;
}

.center {
margin: inherit;
}

Использование в CSS Margin у body может привести к схлопыванию отступов. Обычно у body обнуляют значение margin, при необходимости отступов от элементов используют padding.

Соседние элементы

Из-за того, что внешние отступы, по сути, не являются частью самого элемента, они часто работают не совсем так, как можно было бы предположить, под влиянием других объектов. Одним из примеров такого влияния является эффект схлопывания отступов.

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

.first {
    background-color: black;
    border: 0.1vw solid gold;
    margin: 3vw;
    width: 10vw;    
}
.second {
    background-color: black;
    border: 0.1vw solid darkslateblue;
    margin: 3vw;
    width: 10vw;   
}

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

.first {
    background-color: black;
    border: 0.1vw solid gold;
    margin: 3vw;
    width: 10vw;  
}
.second {
    background-color: black;
    border: 0.1vw solid darkslateblue;
    margin: 5vw;
    width: 10vw;
}

Вложенные элементы

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

.parent {
    width: 40vw;
    height: 20vh;
    background-color: rgba(214, 254, 255, 0.82);
    margin-top: 2vw;
}

.child {
    width: 10vw;
    height: 10vh;
    background-color: rgba(255, 235, 145, 0.82);
    margin-top: 2vw;
}

На картинке приведены примеры поведения элементов и тогда, когда значения margin у родительского и дочернего элементов различны. Как видно, если у дочернего указано значение margin-top больше, чем у родительского, то родительский смещается именно на значение, указанное у дочернего элемента.

.parent {
    width: 25vw;
    height: 20vh;
    background-color: rgba(214, 254, 255, 0.82);
    margin-top: 2vw;
}

.child {
    width: 10vw;
    height: 10vh;
    background-color: rgba(255, 235, 145, 0.82);
    margin-top: 4vw;
}

Сходный эффект наблюдается в поведении отступов, когда при высоте родительского элемента auto устанавливается нижний отступ у родительского и дочернего элементов. Приоритет большего отступа сохраняется и в этом случае.

.parent {
    width: 25vw;
    height: auto;
    background-color: rgba(214, 254, 255, 0.82);
    margin-bottom: 2vw;
}

.child {
    width: 10vw;
    height: 10vh;
    background-color: rgba(255, 235, 145, 0.82);
    margin-bottom: 4vw;
}

Пустые элементы

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

.first {
    background-color: black;
    width: 10vw;
}

.second_empty {
    width: 10vw;
    margin-top: 5vw;
    margin-bottom: 10vw; 
}

.third {
    background-color: rgba(199, 90, 175, 0.76);
    width: 10vw;  
}

Исключения и правила

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

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

Несколько общих правил использования margin:

• лучше прописывать отступы в одном направлении для всех элементов (вправо и вниз);
• формирование расстояния между элементами не должно происходить за счет дочерних элементов;
• отступ дочернего элемента внутри родительского от границ родительского прописывают с помощью padding родительского, а не margin дочернего.

Margin в CSS - одно из свойств элемента, позволяющее управлять его расположением на странице по отношению к другим объектам. У свойства есть четыре вариации, позволяющие изменять положение элемента по горизонтали и вертикали. Одной из проблем использования margin является схлопывание отступов (объединение двух отступов в один).