使用百分比时css高度错误

Question

我正在尝试构建一个通用警报元素，它根据父div的高度进行更改。起初，当我设计所有东西时，我使用了特定的高度，但现在我想让它全部相对，并且出于某种原因，这些计算错误了！

所以说这是我的HTML：

<div class="alert">
    <span class="divider-vertical"></span>
</div>

我的css曾经是：

.alert {
    height: 80px;
} 

.divider-vertical {
    height: 30px;
    margin: 25px 0; // 25*2 + 30 = 80
}

现在我想把它变成相对百分比，所以：

<div style="height: 80px;">
  <div class="alert">
    <span class="divider-vertical"></span>
  </div>
</div>

和我的css：

.alert {
    height: 100%;
}

.divider-vertical {
    height: 37.5%;
    margin: 25px 0;
}

我根据计算使用了这个数字：100 * (30.0 / 80.0) = 37.5。现在，当我打开chrome并检查以查看computed属性时，我发现.alert的高度为80px（应该如此），但是.divider-vertical只有29.25px 。这是为什么？

其他地方没有其他冲突属性，chrome dev工具向我保证元素高度确实是37.5％。请注意，这不是一些无限十进制数的情况，计算返回正好 37.5％所以为什么会有麻烦呢？

Answer 1

我希望能够为您的元素设置尺寸，您应该使用块系列

例如

.divider-vertical {
    display: inline-block;
}

将解决您的问题

Answer 2

我会假设你的CSS中设置box-sizing: border-box属性来考虑边框/填充等因此导致一些混乱？

在这种情况下，您可能希望保留它以使一切都一致。