Относительная прокладка относительно чего?

Если я стиль <h1> элемента с padding: 1.2em или padding: 10%, это относительно:

  • размер шрифта элемента <h1>?
  • высота элемента <h1>?
  • дополнение родительского элемента?
  • что-то еще?

И отличается ли это от em и %?

Ответы

Ответ 1

Это действительно отличается для em и %:

Ems

Размер заполнения зависит от вычисленного размера шрифта этого элемента.

Итак, если ваш размер шрифта <h1> равен 16px, тогда 1.2 ems padding = 1.2 × 16 пикселей = 19.2 пикселей.

Процентное соотношение

Размер заполнения зависит от ширины области содержимого элементов (т.е. ширины внутри и без учета заполнения, границы и поля элемента).

Итак, если ваш <h1> шириной 500 пикселей, 10% отступов = 0,1 × 500 пикселей = 50 пикселей.

(Обратите внимание, что верхнее и нижнее заполнение также будут составлять 10% от ширины элемента, а не 10% от высоты элемента.)

Ответ 2

Вы можете найти следующее полезное:

  • "Ems" (em): "em" - это масштабируемая единица, которая используется в носителях веб-документов. Значение em равно текущему размеру шрифта, например, если размер шрифта документа равен 12pt, 1em равен 12pt. Ems являются масштабируемыми по своей природе, поэтому 2em будет равняться 24pt,.5em будет равняться 6pt и т.д. Ems становится все более популярным в веб-документах благодаря масштабируемости и их мобильному устройству.

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

  • Баллы (pt): Точки традиционно используются в печатных носителях (все, что должно быть напечатано на бумаге и т.д.). Одна точка равна 1/72 дюйма. Точки очень похожи на пиксели, поскольку они являются фиксированными единицами размера и не могут масштабироваться по размеру.

  • Процент (%): единица процента очень похожа на блок "em", за исключением нескольких фундаментальных различий. Прежде всего, текущий размер шрифта равен 100% (т.е. 12pt = 100%). При использовании единицы процента ваш текст остается полностью масштабируемым для мобильных устройств и для доступности.

Взято отсюда.