なぜマージンがCSSのインラインブロックとブロック要素に違うのですか？

Question

問題：

要素display: inline-block;では、マージンは、両方のインスタンスmargin-top: 30px;のために設定されている場合でもdisplay: block;を持つ要素とは異なるマージンを持つことになります！

margin-topは、インラインブロックを持つ要素に適用されますが、ブロックを持つ要素とまったく同じではありません。差異のあるピクセルがあります。どうして？要素タグはスペースなしで次お互いに配置されていない場合

Answer 1

インラインブロック要素のマージンが崩壊しないということですが、ブロック要素では崩壊します。 The Box model page goes over this really well。

だから崩壊マージンとは何ですか？下部に10ピクセルの余白を持つ要素と、上部に5ピクセルの余白を持つ要素があるとします。 2つの間のマージンは15ではありませんが、2つのうち最大のもの（10ピクセル）に縮小されます。

Answer 2

インラインブロックは、デフォルトでは、それらの間のパディング、（スペースの大きさ、幅がそれほど1EM）を持っている：

<element></element><element></element> 

は大丈夫だろう次のようにはなりません。

<element></element> 
<element></element> 

ブロックにはこの問題はありません。そのため、ブロックが異なるようです。これは、埋め込みにインラインのデフォルトを追加します。

これを解決するには、親のfont-sizeを0に設定するか、余分なパディング幅を希望の幅から差し引くことができます。