Как разрешать margin и padding в процентах в grid и flex элементах CSS?

Как разрешать margin и padding в процентах в grid и flex элементах CSS?

От автора: CSS Working Group будет рада услышать ваше мнение. В спецификациях CSS Grid Layout и Flexbox есть давняя проблема. Речь идет о том, как правильно задать в CSS проценты margin и padding.

Из спецификации CSS Grid:

«Процентные margin и padding в grid элементах можно разрешать следующим образом:

По их собственным осям (проценты left/right резолвятся по ширине, top/bottom разрешает по высоте) или

По инлайн оси (проценты left/right/top/bottom резолвятся по ширине)

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Браузер должен сам выбрать одно из двух поведений.

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

Авторам вообще не следует использовать проценты в padding и margin в grid элементах, так как они по-разному ведут себя в браузерах.»

В спецификации flexbox написано то же самое.

В чем проблема?

Проценты должны опираться на что-то. Если grid элементу задать margin-right 10%, то вы ожидаете, что 10% будут вычислены от ширины grid области. Но как вычислить 50% для margin-bottom? Значение должно вычисляться от общей высоты сетки или от ширины? Спецификация позволяет оба варианта, реализации разделены.

Проблема наглядно видна в CodePen ниже. У нас есть три колонки шириной по 120 пикселей. Ко всем колонкам применено свойство margin-right со значением 12 пикселей, 10% от 120. В Chrome и Safari margin-bottom равен 60 пикселей. 50% от ширины в 120px = 60px.

В Firefox и Edge margin-bottom использует высоту сетки, и значение равно 150px, так как я задал высоту сетки, и элементы растягиваются. Если удалить высоту с grid контейнера в Firefox, то контейнер схлопнется, так как больше нет четкой высоты. Chrome сохранит контейнер в 60px – margin.

Такое же поведение наблюдается с Flexbox. Только в Flexbox вычисления ведутся относительно флекс контейнера. Однако в демо ниже видно, как Chrome использует 10% от 500px для margin-right и 50% от 500px для margin-bottom. Firefox использует 10% от 500px для margin-right и 50% от 300px для margin-bottom.

Вычисления относительно ширины отсылают нас к старым временам макетирования, когда у нас не было четкого контроля над высотой элементов. Мы могли оперировать шириной, почему она и стала преобладающей мерой.

Хак с соотношением сторон

Одна из причин следовать поведению Chrome – хак с соотношением сторон для процентного padding работает в flex и grid элементах. На Bram.us есть отличная статья по проблеме совместимости – вертикальные margin/padding и flexbox, необычная комбинация. Проблема также описана на Flexbugs и Gridbugs.

Тем не менее, лучше правильно решать проблему с соотношением сторон и выбрать одно решение для margin и padding.

Нам нужны ваши отзывы!

CSS Working Group с радостью выслушает ваши мысли по этой проблеме. Из написанного выше видно, что с процентными margin и padding по горизонтали проблем нет, они ведут себя, как всегда. Проблема возникает с вертикальными margin и padding. Какое поведение вам нравится больше, Firefox или Chrome? Используете ли вы вертикальные margin и padding для других вещей кроме хака с соотношением сторон.

Можете оставлять комментарии в баге на GitHub. Было бы круто решить эту проблему с совместимостью.

Автор: Rachel Andrew

Источник: https://www.rachelandrew.co.uk/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree