Расчет маржи и высоты заполнения в флюидном / адаптивном макете

Question

Я понимаю, как рассчитать margin-left / padding-left и margin-right / padding-right в жидкой / адаптивной компоновке.Но как насчет margin-top / padding-top и margin-bottom / padding-bottom?

Например, у меня есть такой код:

header h1{padding:10px 0 0 15px;}

Когда я преобразую это в макет жидкостиполучить это:

header h1{padding:10px 0 0 8.823529411765%;}

Как конвертировать верхнюю часть отступа?Дайвингом на 16 пикселей (размер основного шрифта)?Когда я это сделаю, результат будет более 10px.

Answer 1

Если вы хотите, чтобы поля и отступы соответствовали размеру шрифта, лучше использовать em для вашего устройства.Хотя сложный из-за наследования, em - это типографская единица, представляющая вертикальную высоту 1 строки текста.Для получения дополнительной информации см. Статью Джона Танджерина:

http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

Кроме того, Джон предоставил таблицу преобразования px в em: http://jontangerine.com/silo/css/pixels-to-ems/

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