Question

出于某种原因，将高度设置为0px实际上并不会将元素视觉缩小为0px ...

<div id="bg">
    <div id="animate"><span>WINNER ALERT! Click here to get a million dollars!!!</span></div>
</div>

#bg {
    background-color:#898989;
    font-family: Helvetica;
    padding:20px;
}

span {
    border:solid black 1px;
    height:0px;
}

#animate {
    height: 0px;
}

http://jsfiddle.net/LgKP3/

Answer 1

这是因为span是inline元素。高度不适用于内联元素。 Inline元素从其中包含的内容中获取高度。

在此处查看 - ＆gt; http://jsfiddle.net/59xjv/

由于height:500px为span，因此未应用inline。

同样，当您将其转换为block-level元素时会应用它。

在此处查看 - ＆gt; http://jsfiddle.net/59xjv/1/

希望这有帮助!!!

Answer 2

http://jsfiddle.net/LgKP3/1/

您必须将显示设置为内联块，我还将溢出设置为隐藏以隐藏内容

span {
    border:solid black 1px;
    height:0px;
    display: inline-block;
    overflow: hidden;
}

Answer 3

提供<span>代码display: inline-block;和overflow: hidden;。

Fiddle here.

Answer 4

Span是内联元素而不是块级元素，这意味着它根本不具有高度。无论您在样式表中为跨度指定的高度如何，它都无法工作。我建议你使用id或高度等级的div：0px而不是span。

为什么我不能将跨度的高度设置为0px？

4 个答案: