CSS — маржа: авто; — Как это работает

Использование margin: auto для центрирования элемента блока по горизонтали является хорошо известным методом. Но вы когда-нибудь задумывались, почему или как это работает? Чтобы ответить на этот вопрос, сначала нам нужно посмотреть, как работает margin: auto. Также в миксе есть то, что auto может делать на полях, если оно работает для вертикального центрирования, и некоторые другие проблемы.

Но сначала, что же на самом деле делает auto?

Определение auto зависит от элементов, типов элементов и контекста. В полях auto может означать одну из двух вещей: занимать доступное пространство или 0 px. Эти два будут определять различные макеты для элемента.

«авто» занимает свободное место

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

Увидеть перо Маржа: авто Прети (@rpsthecoder) на CodePen,

Тем не менее, это будет работать только для горизонтальных полей (подробнее о Почему позже), и он также не будет работать с плавающими и встроенными элементами и сам по себе также не может работать с абсолютными и фиксированными позиционными элементами (однако мы увидим, как это сделать).
Faux Float, занимая доступное пространство
Поскольку auto в правом и левом полях одинаково занимает «доступное» пространство, как вы думаете, что произойдет, если значение auto будет задано только одному из них?

Левое или правое поле с auto будет занимать все «доступное» пространство, заставляя элемент выглядеть так, как будто он был сброшен вправо или влево.

Увидеть перо margin: auto faux float Прети (@rpsthecoder) на CodePen,

«Авто» Рассчитано до 0px

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

Это победит первоначальную цель использования чего-то вроде float. Следовательно, auto будет иметь значение 0px в этих элементах.

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

Ширина значения auto будет иметь поля в 0px. Ширина элемента блока обычно покрывает его контейнер, когда он установлен на auto или 100%, и, следовательно, в этом случае поле auto будет вычисляться до 0px.
Что происходит с вертикальными полями при значении авто?
auto в верхнем и нижнем полях всегда вычисляется в 0px (за исключением абсолютных элементов). W3C спецификация говорит это так:

«Если« margin-top »или« margin-bottom »равно« auto », их используемое значение равно 0»

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

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

Это также может быть из-за эффект обрушения поля (коллапс соседних элементов »поля), что является еще одним исключением для вертикальных полей.

Однако последнее представляется маловероятным, поскольку элементы, которые не сжимают свои поля, такие как Floats, и элементы с переполнением, отличным от видимого, по-прежнему назначают вертикальные поля 0px для auto.

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

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

Это где другой W3C спецификация приходит в:

«Если все три значения« left »,« width »и« right »имеют значение« auto »: сначала установите любые значения« auto »для« margin-left »и« margin-right »на 0… »

«Если ни один из трех не является« автоматическим »: если оба« margin-left »и« margin-right »имеют значение« auto », решите уравнение при дополнительном ограничении, чтобы два поля получали равные значения»

Это в значительной степени говорит о том, что для горизонтальных автоматических полей для захвата равных пространств значения для left, width и right не должны быть автоматически, их значения по умолчанию. Поэтому все, что нам нужно сделать, — это придать им некоторую ценность в абсолютно позиционированном элементе. Левый и правый должны иметь равные значения для идеального центрирования.

Спецификация также упоминает что-то похожее на вертикальные поля.

«Если все три из« top »,« height »и« bottom »являются автоматическими, установите« top »в статическое положение…»

«Если ни один из трех не является« автоматическим »: если оба« margin-top »и« margin-bottom »имеют значение« auto », решите уравнение при дополнительном ограничении, чтобы два поля получали равные значения…»

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

Теперь, комбинируя все это, мы получим следующее:

Увидеть перо маржа: авто абсолют Прети (@rpsthecoder) на CodePen,

Вывод

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

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

Похожие записи

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

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