Question

确定，

请考虑以下代码：

<div class="grid-container">
    <div class="grid-20 padright">       
        <h3 class="padhalf blue-header">
            This is 20% Wide
        </h3>        
    </div>    
    <div class="grid-80 padleft">
        <h3 class="padhalf blue-header">
            This is 80% Wide
        </h3>
    </div>
</div>

<div style="clear: both; height: 15px;"></div><!-- Just a spacer -->

<div class="grid-container">
    <div class="grid-50 padright">       
        <h3 class="padhalf blue-header">
            This is 50% wide
        </h3>        
    </div>    
    <div class="grid-50 padleft">
        <h3 class="padhalf blue-header">
            This is 50% wide
        </h3>
    </div>
</div>

CSS：

*, *:before, *:after {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.grid-20 { float: left; width: 20%; }
.grid-50 { float: left; width: 50%; }
.grid-80 { float: left; width: 80%; }

.grid-container {
    margin: 0 auto;
    padding-left: 1%;
    padding-right: 1%;
}
.grid-container:after {
    clear: both;
}

.blue-header {
    background-color: #00f;
    color: #fff;
}

.padhalf {
    padding: 0.5% 0.5% 0.7% 0.5%;
}

.padright {
    padding-right: 1%;
}

.padleft {
    padding-left: 1%;
}

JSFiddle：https://jsfiddle.net/u4kzhswq/

我不知道为什么宽度变化时H3元素的高度会发生变化。为什么宽度或填充会影响高度？

当父母的宽度相同时，一切都可以。如果不是，孩子H3的高度似乎会成比例地改变。

谢谢，

Answer 1

它与众不同的原因是因为您使用填充百分比。百分比是根据元素的宽度计算的。

根据documentation

％指定填充宽度百分比的填充元件

因此，如果您的容器更宽（在这种情况下为80％），填充百分比将更高。

Answer 2

看着你的小提琴，你只在一个元素上有.padhalf类，这恰好是更大的元素。

.padhalf {
  padding: 0.5% 0.5% 0.7% 0.5%;
}

当您致电padding时，数字会排在最前面 - ＆gt;对 - ＆gt;底部 - ＆gt;左

因此，除此之外，您要在所有方面填充.5%，但在您设置.7%的底部除外。

使用.padhalf删除该行将解决高度问题。这是 Fiddle

为什么填充会影响容器的高度？

2 个答案: