浮動小数点divの親に関するCSS

Question

私は以下のレイアウトのようなWebページを持っています。 cssファイルの内容は次のとおりです。

#green{ 
border:20px solid #3D3; 
float:left; 
display:block; 
} 
#orange{ 
width:100px; 
height:100px; 
border:10px solid orange; 
float:left; 
} 

.child{ 
border:10px solid black; 
display:inline-block; 
margin:0px; 
} 
.parent{ 
    border:10px solid #f00; 
    display:table; 
    padding:0px; 
    margin:0px; 
    } 

    .clear{ 
    clear:both; 
    } 

htmlコンテンツは次のとおりです。

<div class="parent"> 
    <div class="child"> 
    <div id='green'> </div> 
    <div id="orange"></div> 
    <div class="clear"> </div> 
    </div> 
</div> 

私は次のようにレンダリング結果を得ました。

は、なぜ私はレイアウトの白のギャップを持っていますか？
私はdivタグに白の色の隙間を追加しませんでした。
私を助けてください。
ありがとうございます。

Answer 1

を見ます親表示プロパティをテーブルと子表示プロパティにインラインブロックに設定します。ただ削除するディスプレイ：インラインブロック;あなたのdiv.childのプロパティ、それは正常に動作します。私は以下のスニペットを追加しました。

#green{ 
 
border:20px solid #3D3; 
 
float:left; 
 
display:block; 
 
} 
 
#orange{ 
 
width:100px; 
 
height:100px; 
 
border:10px solid orange; 
 
float:left; 
 
} 
 

 
.child{ 
 
border:10px solid black; 
 
/*display:inline-block;*/ 
 
margin:0px; 
 
} 
 
.parent{ 
 
    border:10px solid #f00; 
 
    display:table; 
 
    padding:0px; 
 
    margin:0px; 
 
    } 
 

 
    .clear{ 
 
    clear:both; 
 
    }

<div class="parent"> 
 
    <div class="child"> 
 
    <div id='green'> </div> 
 
    <div id="orange"></div> 
 
    <div class="clear"> </div> 
 
    </div> 
 
</div>

Answer 2

インラインブロック要素間のスペースとの競合理由は、要素間に空白があるためです（改行といくつかのタブは空白としてカウントされます）。最小化HTMLは、この問題を解決するには、単にこのfont-size:0プロパティを修正することができ、 は、参照サイトにhttps://css-tricks.com/fighting-the-space-between-inline-block-elements/

.parent { 
    font-size:0; 
} 

をチェックしますので、起こっている添付スニペット

#green { 
 
\t border: 20px solid #3D3; 
 
\t float: left; 
 
\t display: block; 
 
} 
 
#orange { 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t border: 10px solid orange; 
 
\t float: left; 
 
} 
 
.child { 
 
\t border: 10px solid black; 
 
\t display: inline-block; 
 
\t margin: 0px; 
 
} 
 
.parent { 
 
\t border: 10px solid #f00; 
 
\t display: table; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
    font-size:0; 
 
} 
 
.clear { 
 
\t clear: both; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <div id='green'> </div> 
 
    <div id="orange"></div> 
 
    <div class="clear"> </div> 
 
    </div> 
 
</div>