javascript - 为什么当高度设置为 0% 时条形图不会消失

Question

我正在用 css 开发一个条形图

但是当我将条形的高度设置为0%时，它不会消失。

我希望高度为 0% 的条形消失。这是栏的 css 代码

.bar{
    width:20px;
    padding: 20px;
    background-color: orange;
    margin-left: 20px;
    margin-top: 105px;
    z-index: 500;
    border-radius: 10px;
    flex-shrink: 0;
}

如果需要更多信息，请告诉我

Answer 1

这是因为padding:无论您选择哪种box-sizing设置，padding都会添加到或高度的一部分，在您的情况下，最小总高度为 40px。

但是你可以选择只使用左右内边距，那么它就会变得不可见:

.bar{
    width:20px;
    padding: 20px;
    background-color: orange;
    margin-left: 20px;
    margin-top: 105px;
    z-index: 500;
    border-radius: 10px;
    flex-shrink: 0;
}
.bar2{
    width:20px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: orange;
    margin-left: 20px;
    margin-top: 105px;
    z-index: 500;
    border-radius: 10px;
    flex-shrink: 0;
}

<div class="bar"></div>
<div class="bar2"></div>