为什么当高度设置为 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{&nbsp; &nbsp; width:20px;&nbsp; &nbsp; padding: 20px;&nbsp; &nbsp; background-color: orange;&nbsp; &nbsp; margin-left: 20px;&nbsp; &nbsp; margin-top: 105px;&nbsp; &nbsp; z-index: 500;&nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; flex-shrink: 0;}.bar2{&nbsp; &nbsp; width:20px;&nbsp; &nbsp; padding-left: 20px;&nbsp; &nbsp; padding-right: 20px;&nbsp; &nbsp; background-color: orange;&nbsp; &nbsp; margin-left: 20px;&nbsp; &nbsp; margin-top: 105px;&nbsp; &nbsp; z-index: 500;&nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; flex-shrink: 0;}<div class="bar"></div><div class="bar2"></div>