インラインコンテナの余白は余白になりません。どうして？

Question

誰でも私に仕様を教えてもらえますか？

x-x { 
 
    padding: 10px; 
 
}

<x-x> 
 
    <div>1</div> 
 
    <div>2</div> 
 
</x-x>

• パディング左はパッド
• しかし、パディングトップとパディングボトムは
• していない理由ですか？

http://codepen.io/geoyws/pen/NNJjPV

Answer 1

カスタム要素（<x-x>）CSS initial valuesデフォルト。したがって、そのdisplayの値はinlineです。

この要素には、ブロックレベルの要素である2つのdivが含まれています。

インラインボックスはブロックレベルのボックスをラップできないため、ブラウザはdivをラップする前に暗黙的に<x-x>を閉じます。

したがって、左側のパッドが機能しないのは、カスタム要素が実際に2つのdivを折り返していないためです。これは、最初のオープニング<div>の直前で閉じられています（実際には、カスタム要素とdivは兄弟のようになります）。

はしかし、カスタム要素でspanを入れた場合、パディングが動作します、spanはデフォルトでdisplay: inlineあるので、それは別のインラインレベル要素（demo）でラップすることができます。

これはすべて開発ツールで確認できます。カスタム要素を強調表示してdivをラップしないことを確認します。

インラインボックスは、インフローブロックレベルボックスを含む

9.2.1.1. Anonymous block boxes

、インライン：スペック、インラインレベルボックス「の周りに破壊」ブロックレベルボックスで説明したように

ブロックレベルのボックス（および連続する のブロックレベルの兄弟、または折りたたみ可能な空白および/またはフロー外の 要素のみで区切られたブロックレベルの兄弟）の周囲には、 （およびその同じ行ボックス内のそのインライン祖先） 、インラインボックスを2つのボックスに分割する（ 側が空）、ブロックレベルのボックスの両側に1つ。休憩前と休憩後の行 は、匿名の ブロックボックスで囲まれ、ブロックレベルのボックスは、これらの匿名ボックス の兄弟になります。そのようなインラインボックスが相対 の位置付けの影響を受ける場合、結果の翻訳はインラインボックスに含まれるブロックレベルの ボックスにも影響します。

Answer 2

あなたはディスプレイを備えた10pxのでのX-Xにパディングを設定していますインライン;デフォルトでは、子の表示プロパティはです。display：block;したがって、表示ブロックを親に追加するだけで、つまり、x-x要素に加えて、埋め込み：10px;あなたは期待した結果を得るでしょう。

x-x { 
    padding: 10px; 
    display:block; 
} 

ハッピーコーディング:-)