填充百分比如何工作？ [英] How does padding percentage work?

问题描述

HTML

 < div class ='wrapper'> 
< div class ='elementContainer'> 
此行应该在黄框的中间开始
< / div> 
< / div> 
  

CSS

  .wrapper 
 {
 position：relative; 
 
 height：300px; 
 width：400px; 
 
背景：lightyellow; 
 border：1px纯黑色; 
} 
 
 .elementContainer 
 {
 position：relative; 
 height：200px; 
 width：300px; 
 
 padding-top：50％; 
 
背景：红色; 
} 
  

小提琴示例： http://jsfiddle.net/jakelauer/s2ZXV/

在上面的例子中， .elementContainer 有一个 50％的填充顶部。这应该根据父元素的高度（ .wrapper ）来计算，这意味着它应该出现在 150px 之内。相反，它出现在 200px 。这是怎么回事？

规范解释了原因。

< percentage>

百分比是根据生成的框的包含块的宽度来计算的

400的50％是200。

HTML

<div class='wrapper'>
    <div class='elementContainer'>
        This line should start halfway down the yellow box
    </div>
</div>

CSS

.wrapper
{
    position: relative;

    height: 300px;
    width: 400px;

    background: lightyellow;
    border: 1px solid black;
}

.elementContainer
{
    position: relative;
    height: 200px;
    width: 300px;

    padding-top: 50%;

    background: red;
}

Fiddle example: http://jsfiddle.net/jakelauer/s2ZXV/

In the example above, .elementContainer has a padding-top of 50%. This should be calculated based on the parent element's (.wrapper) height, which means it should come out to 150px. Instead, it comes out to 200px. What's going on?

解决方案

The specifications explain why.

<percentage>
The percentage is calculated with respect to the width of the generated box's containing block

50% of 400 is 200.

这篇关于填充百分比如何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！