CSS：高さを0に設定すると有効ですか？

Question

isはdisplay：noneと同じ効果を得るために高さ0を設定する有効な/法的なCSSです。

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

フィドル：https://jsfiddle.net/L0o1spko/

Answer 1

それが有効だが、同じではありません。あなたが（例えば）固定要素を持っている場合、それはまだあなたが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> 

Answer 2

0に高さを設定するために完全に有効であり、使用することができますあなたのコンテンツが何も入っていないアニメーションのような多くのものに対して 概念に間違いはありません。あなたはそれをかなり頻繁に必要とするかもしれません。

しかし、もし私があなただったら、なぜディスプレイなしの代わりにそれを使用するのか疑問に思うでしょうか？アイテムを隠すだけの場合は、セマンティックな方法で実際には間違っています。できれば、これを避けるべきです。 一方、私の前の説明に似た正当な理由があるなら、それに行きなさい、何も間違っていません。

Answer 3

これは正当ですが、position: absoluteとvisibility: hiddenもスペースを占有したり、子供やコンテンツが画面に表示されないように設定することもできます。