Why can I not set height of a span to 0px?

Question

For some reason setting height to 0px does not actually shrink the element to 0px visually...

<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

That is because span is an inline element. Height does not apply to inline element. Inline elements derive their height from the content that is contained in them.

See that here-> http://jsfiddle.net/59xjv/

Even height:500px is not applied since the span is inline .

Similarly, it gets applied when you convert it to a block-level element.

See that here-> http://jsfiddle.net/59xjv/1/

Hope this helps!!!

Answer 2

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

You have to set display to inline block, I also set overflow to hidden to hide the contents

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

Answer 3

Give the <span> tag display: inline-block; and overflow: hidden; .

Fiddle here.

Answer 4

Span is an inline element not a block level element which means it can't have a height at all. Regardless the height you assign in the stylesheet for the span, it won't work. I suggest you use a div with an id or a class of height:0px instead of a span.