CSSでは、高さ：0と高さの違いは何ですか？

Question

私が理解している限りでは（それほど遠くない）、divはheight:0;で、高さが指定されていないdivは、両方とも子要素を格納するのに必要な高さに拡張されます。なぜheight:0をコード化しますか？

（非常に良い理由があると確信しています）

Answer 1

divとheight:0が子供を表示すると言っているのは間違いだと思います。予想通り、高さを0に設定すると、divが消えます。その子はまだ表示されるかもしれませんが、divの高さはゼロです。コンボを試してみてください。このように

#my-div{ 
    height:0; 
    overflow:hidden; 
} 

、divから溢れ何も表示されなくなりますとheight:0の効果をより見やすくする必要があります。

Answer 2

特定の高さのdivは決して展開されません。したがって、divの内容が目的の高さよりも大きい場合、コンテンツはオーバーフローしますが、divは展開されません。

これを示す例です。あなたはheight: 0要素がゼロピクセルより高いを拡張しません指定

#div-1 { 
 
    margin: 5px; 
 
    border: 5px solid grey; 
 
    background: red; 
 
} 
 

 
#div-2 { 
 
    margin: 5px; 
 
    border: 5px solid grey; 
 
    background: green; 
 
    height: 0; 
 
}

<div id="div-1"> 
 
\t <p>a</p> 
 
\t <p>a</p> 
 
\t <p>a</p> 
 
\t <p>a</p> 
 
</div> 
 
<div id="div-2"> 
 
\t <p>a</p> 
 
\t <p>a</p> 
 
\t <p>a</p> 
 
\t <p>a</p> 
 
</div>

Answer 3

。

高さを指定しないと、要素は内容の高さに拡大されます。

Answer 4

高さとの間には大きな違いがあります：0対高さ指定なし。どちらも内側のコンテンツを表示しますが、どちらの高さも表示されます：0オーバーフローを設定しないとコンテンツが表示されます。高さベースのコンテンツは増加しませんが、指定された高さはコンテンツを表示せず、その高さは自動的に増加します。[here] [1]を参照してください。

[1]: https://jsfiddle.net/ntpr5enu/