CODEWITHSUNDEEP
css
noclist
noclist

Reputation: 1819

CSS: Valid to set height to 0?

Is is valid/legal css to set a height of 0 to achieve the same effect as display: none?

.item {
   height: 0;
   overflow: hidden;
 }

Fiddle: https://jsfiddle.net/L0o1spko/

Upvotes: 0

Views: 337

Answers (3)

Suthan Bala
Suthan Bala

Reputation: 3299

It is legal, but you may also want to set position: absolute as well as visibility: hidden just so that it doesn't take up any space nor any of it's children or contents shows up on screen.

Upvotes: 1

Carele
Carele

Reputation: 784

It is totally valid to set height to 0 and can be used for many things such as animations where your content "slides in" from nothing. There is nothing wrong with the notion and you may need it pretty often.

However, if I were you i would question why you would use it instead of display none ? If it is just to hide an item, then it is actually wrong in a semantic way, and you should avoid doing this if you can. On the other hand, if you have a good reason similar to my explanation before, go for it, there is nothing wrong with it.

Upvotes: 1

Alon Eitan
Alon Eitan

Reputation: 12025

It's valid, but not the same. If you have a fixed element (for example) inside that the it will still show unless you set its parent as display:none:

https://jsfiddle.net/L0o1spko/1/

.item1 {
  height: 0;
  overflow: hidden;
}

.fixed { position:fixed;}

.item2 {
  display: none;
}

<div class="item1">
    This content has a height of 0.
    <div class="fixed">
        sdfsdffsfsdf
    </div>
</div>

<div class="item2">
    This content has a display of none.
    <div class="fixed">
        sdfsdffsfsdf
    </div>
</div>

Upvotes: 1

Related Questions