CSS margin:auto — Как это работает?

Использование margin:auto, чтобы отцентрировать блочный элемент по горизонтали, это отлично известный метод. Но задумывались ли вы, как это работает?

Результат действия значения auto зависит типа элемента и контекста. Для отступов сверху CSS auto может означать одно из двух: занять все свободное пространство или 0 пикселей. В зависимости от этого будет задаваться различная структура.

«auto» — занять все доступное пространство

Это наиболее распространенный метод использования auto для отступов. Если мы задаем auto для левого и правого отступов одного элемента, они равномерно займут все доступное в контейнере по горизонтали пространство. Таким образом элемент расположится по центру.

Посмотреть пример

Это работает только для горизонтальных отступов. Но не будет работать для плавающих и строчных элементов. А также для абсолютно и фиксировано позиционированных элементов.

Имитация плавающего поведения через распределение доступного пространства

auto поровну распределяет все свободное пространство между правым и левым отступами. Но что произойдет, если мы зададим это значение только для одного из отступов? Тогда он займет все доступное пространство, и элемент будет смещен к правому или левому краю.

Посмотреть пример

«auto» — задать 0 пикселей

Как упоминалось выше, auto не работает для плавающих, строчных и абсолютно позиционированных элементов. Для них определена структура, поэтому в использовании margin auto нет смысла.

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

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

Значение auto будет определять отступ в 0 пикселей, когда для блочного элемента задана ширина auto или 100%. Обычно он занимает всю ширину контейнера, следовательно, на ширину отступа останется 0 пикселей.

Что происходит с вертикальными отступами со значением auto?

auto и для отступа сверху CSS, и для нижнего отступа вычисляется как 0 пикселей(за исключением абсолютно позиционированных элементов). В спецификации W3C указано следующее:

«Если для “margin-top” или “margin-bottom” задано «auto», для них используется значение, равное 0″.

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

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

Или из-за эффекта объединения отступов(слияния отступов соседних элементов). Это ещё одно исключение из данного правила определения вертикальных отступов.

Центрирование абсолютно позиционированных элементов

Поскольку для абсолютно позиционированных элементов введено исключение, можно без труда использовать значение auto, чтобы выровнять их по центру вертикально и горизонтально. Но сначала необходимо выяснить, когда margin:auto будет работать так для отступа сверху CSS.

В другой спецификации W3C сказано:

«Если для всех трех позиций(“left”, “width” и “right”) задано значение «auto», сначала установите 0 для “margin-left” и “margin-right…» » Если «auto» задано только для “margin-left” и “margin-right», тогда решите уравнение с дополнительным условием, чтобы для обоих отступов была задана одинаковая ширина».

Здесь довольно подробно описана ситуация, касающаяся значения auto для горизонтальных отступов. Чтобы данные отступы имели одинаковый размер, для left, width и right не должно задаваться значение auto(их значение по умолчанию). Чтобы отцентрировать элемент по горизонтали, необходимо задать определенное значение для ширины абсолютно позиционируемого элемента, а left и right при этом должны иметь равные значения.

В спецификации также упоминается что-то подобное и для отступов сверху CSS div.

«Если для «top», «height» и «bottom» задано значение «auto», установите для «top» позицию static…»

«Если для одной из трех позиций не установлено значение «auto»: если для «top» и «bottom» установлено значение «auto», решите уравнение с дополнительным условием, чтобы задать для данных отступов одинаковые значения».

Следовательно, чтобы отцентрировать по вертикали абсолютно позиционируемый элемент top, height и bottom не должны иметь значение auto.

Сейчас, объединив все это, мы получим следующее:

Посмотреть пример

Заключение

Если вам требуется сместить элемент на странице вправо или влево без контейнерных элементов(к примеру, как в случае с float), помните, что есть функция использовать для отступов значение auto.

Преобразование элемента в абсолютно позиционируемый только для того, чтобы отцентрировать его по вертикали(отступы сверху CSS), не лучшая идея. Существуют и иные варианты, такие как flexbox и CSS transform, которые больше подходят для этого.

Добавить комментарий

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