表示：インラインブロックは垂直パディング

Question

を追加し、私は次のようなHTMLとCSSがあります

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
.row { 
 
    background-color: red; 
 
    /* display: inline-block; */ 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
ul li { 
 
    border: 2px solid green; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 15px; 
 
}

<div class="row"> 
 
    <ul> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>one</li> 
 
    </ul> 
 
</div>

を、私は私のCSSでinline-blockを使用する場合には、次のようになります。

display:inline-blockなし（これは完全に大丈夫です、pr

そこでここでは、この垂直パディングから来るん：ディスプレイをesuming）は、デフォルトでblockのですか？

Answer 1

詰め物は、並べ替えられていないリストと畳み代から来ます。親（div.row）のdisplay：inline-blockがない場合、そのdivはデフォルトでブロック要素として表示され、margins collapseと表示されます。 div.row要素にoverflow: autoを追加することで、マージンを縮小するための標準的な方法を適用することで、これを確認できます。

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
.row { 
 
    background-color: red; 
 
    /* display: inline-block; */ 
 
    overflow:auto; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
ul li { 
 
    border: 2px solid green; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 15px; 
 
}

<div class="row"> 
 
    <ul> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>one</li> 
 
    </ul> 
 
</div>

その余分なスペースを取り除くための最も簡単な方法は、<ul>上ゼロにマージンを設定することです。

Answer 2

ulからマージンを取り除くと、マージンはulのデフォルトマージンになります。

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
.row { 
 
    background-color: red; 
 
    display: inline-block; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
ul li { 
 
    border: 2px solid green; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 15px; 
 
}

<div class="row"> 
 
    <ul> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>one</li> 
 
    </ul> 
 
</div>