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

Question

我正在用css开发一个条形图但是当我将height栏设置为它时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您选择哪种设置，填充都将添加到高度或部分高度，在您的情况下，这会导致最小总高度为 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>