Расчет процентной маржи в CSS

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

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

Вопрос сводится к следующему: Как вы рассчитываете процентную маржу?

Вопрос
Скажем, на вашем сайте есть контейнерный div, а внутри него – контентный div:
Теперь давайте дадим этому элементу содержимого верхнее поле:
.content {margin-top: 10%; }

Ладно, это 10%… но 10% чего? Это вопрос, на который правильно могут ответить только 13,8% людей. И имейте в виду: у этих людей есть доступ к Google!

Что мне нравится в этом вопросе, так это то, что кажется, что ответ должен быть очевиден. Настолько, что я подозреваю, что большинство людей просто делают предположения (и догадываются неправильно). Но, может быть, это не кажутся вам очевидными. Я имею в виду, если вы действительно используете свое воображение, есть много способов, которыми браузер мог бы рассчитать такую ​​маржу.

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

• 10% от высоты div содержимого
• 10% от высоты контейнера div
• 10% ширины div содержимого
• 10% ширины div контейнера

Помните, что только 13,8% людей могут выбрать правильный ответ из этого списка. Это хуже, чем шанс!

Посмотрите внимательно на ответы; вы увидите, что на самом деле вам нужно знать только две вещи:
Контейнер или контент?
Во-первых, это размер поля зависит от размера самого содержимого div или от размера контейнера div?

Это не повод, но вы, вероятно, можете доверять своим инстинктам. Если я установил div равным 50% ширины его контейнера, а затем я хочу, чтобы его левое и правое поля заполняли остальную часть пространства, я бы, естественно, установил их на 25% каждое (так что проценты в сумме составляют 100%). Чтобы это работало, процентные поля должны зависеть от размеров контейнера.

Конечно, две трети людей, прошедших тест, правильно понимают эту часть ответа.
Ширина или высота?
Второй, – это размер margin-top, основанный на ширине или высоте этого элемента?

Если вы обратили внимание, вы, вероятно, уже настороже. Чтобы так мало людей могли выбрать правильный ответ, это должен быть вопрос с подвохом, верно?

И все же, держу пари, вы едва можете поверить, что ответ не высота. Что ж, это не так.

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

Не расстраивайтесь, если вы думали, что это должна быть высота. Около 80% людей, проходящих тест, согласны с вами:
Это имеет смысл… Нет, правда!
Все еще не верите? Вот цитата из Спецификация W3C CSS:

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

То же самое касается верхнего и нижнего отступов, если вам интересно. Что касается границ, то указывать их ширину в процентах запрещено.

Итак, на данный момент вы, вероятно, думаете, что создатели CSS либо помешанные, или они просто сделали действительно глупую ошибку. Но я здесь, чтобы сказать вам, есть две веские причины использовать вертикальные поля на основе ширины содержащего блока:
Горизонтальная и вертикальная согласованность
Конечно, есть сокращенное свойство, позволяющее указать поля для всех четырех сторон блока:
маржа: 10%;
Это расширяется до:
верхняя маржа: 10%; маржа-право: 10%; нижняя маржа: 10%; маржа слева: 10%;
Теперь, если бы вы написали что-либо из вышеперечисленного, вы, вероятно, ожидали бы, что поля на всех четырех сторонах блока будут одинакового размера, не так ли? Но если бы margin-left и margin-right были основаны на ширине контейнера, а margin-top и margin-bottom были основаны на его высоте, то они обычно были бы разными!
Как избежать круговой зависимости
CSS размещает контент в блоках, расположенных вертикально вниз по странице, поэтому ширина блока обычно полностью определяется шириной его родительского элемента. Другими словами, вы можете рассчитать ширину блока, не беспокоясь о том, что внутри этот блок.

Другое дело – высота блока. Обычно высота зависит от общей высоты его содержимого. Измените высоту содержимого, и вы измените высоту блока. Видите проблему?

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

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

Примечание редактора: это написано для Hongkiat.com Кевином Янком. Кевин пишет о сети с 1999 года, написав книги по PHP, CSS и JavaScript. Он также вел подкасты, выступал на конференциях и создавал обучающие видео по Интернету. Сейчас он возглавляет команду разработчиков sitthetest.com, веб-приложения для создания и проведения онлайн-тестов.
Подробнее о Hongkiat: Читаю: 10 скрытых свойств CSS3, которые вы должны знать