相对填充是相对于什么？ [英] Relative padding is relative to what?

问题描述

如果我用 padding：1.2em 或样式化< h1> 是相对于<：code的



1. font-size < h1> 元素的高度>

   元素？



2. >
   
3. 父元素的填充？


4. 别的什么？

> em 和％？

解决方案

em 和％

Ems

填充大小与所计算的该元素的字体大小相关 p>

所以，如果你的< h1> 的计算字体大小是16px，那么1.2 ems padding = 1.2× 16像素= 19.2像素。

百分比

填充大小是相对于元素的内容区域（即元素的内部宽度，而不包括填充，边框和边距）。

$ c>< h1> 宽500像素，10％padding = 0.1×500像素= 50像素。

底部填充也将是元素宽度的10％，不是元素高度的10％。）

If I style an <h1> element with padding: 1.2em or padding: 10%, is that relative to the:

1. font-size of the <h1> element?
2. height of the <h1> element?
3. padding of the parent element?
4. something else?

And is it different for em and %?

解决方案

It is indeed different for em and %:

Ems

The padding size is relative to the calculated font size of that element.

So, if your <h1>’s calculated font size is 16px, then 1.2 ems of padding = 1.2 × 16 pixels = 19.2 pixels.

Percentages

The padding size is relative to the width of that element’s content area (i.e. the width inside, and not including, the padding, border and margin of the element).

So, if your <h1> is 500px wide, 10% padding = 0.1 × 500 pixels = 50 pixels.

(Note that top and bottom padding will also be 10% of the width of the element, not 10% of the height of the element.)

这篇关于相对填充是相对于什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！