Относительное заполнение относительно чего?

Если я задаю стиль <h1> элементу с помощью padding: 1.2em или padding: 10%, это относительно:

  1. размер шрифта элемента <h1>?
  2. высота элемента <h1>?
  3. заполнение родительского элемента?
  4. что-то другое?

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


padding css
person koen    schedule 21.11.2011    source источник

Ответы (3)


arrow_upward
22
arrow_downward

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

Эмс

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

Итак, если рассчитанный размер шрифта для <h1> составляет 16 пикселей, то 1,2 em padding = 1,2 × 16 пикселей = 19,2 пикселей.

Проценты

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

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

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

person Paul D. Waite    schedule 21.11.2011
comment
Отступ в процентах зависит от ширины содержащего элемента, а не от самого элемента. - person lohfu; 22.11.2017
comment
Почему у него так много голосов? Поскольку @Iouhfy упомянул, что заполнение относится к ширине родительского элемента, а не к ширине (или области содержимого) самого элемента. - person denik1981; 31.03.2021

arrow_upward
0
arrow_downward

Единицы "em" всегда относятся к размеру шрифта. См. http://w3schools.com/cssref/css_units.asp для справки по модулям CSS.

person PaulF    schedule 21.11.2011

arrow_upward
-1
arrow_downward

Вам может пригодиться следующее:

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

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

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

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

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

person Rich O'Kelly    schedule 21.11.2011