余白：要素

Question

前に私のcodepenを参照してください：http://codepen.io/Chiz/pen/NAmdvrで

：疑似要素の前に、私は20ピクセルそれぞれの上部と左マージンを設定します。

しかし、20pxのマージンはメインエレメント自体（div）に適用されるようですが、左側の20pxマージンは：beforeエレメント自体に適用されるようです。

これはなぜですか？

.b 
 
{ 
 
    width:100px; 
 
    height:100px; 
 
    background-color:gray; 
 
} 
 

 
.b:before 
 
{ 
 
    content:"a"; 
 
    color:white; 
 
    display:block; 
 
    width:50%; 
 
    height:50%; 
 
    background-color:rgb(40,40,40); 
 
    margin:20px 0 0 20px; 
 
}

<div class="b"></div>

Answer 1

両方の要素の上部縁と前:before疑似要素はcollapsingです。その結果、代わりに要素から擬似要素が出てくる余白になります。これは水平マージンでは起こりません。 this answerを参照してください。

ボックスが要素または擬似要素に属しているかどうかにかかわらず、余白の折り畳み動作は同じです。言い換えれば、CSSに関する限り、2つのボックスは隣接する上部マージンを持つインフローブロックボックスです。これらのボックスは要素または疑似要素によって生成されても関係ありません。:before疑似要素にはdisplay: block宣言があります:before疑似要素のデフォルト表示がinlineであるため、これは問題ではありません。

Answer 2

変更ディスプレイ：ディスプレイにブロック：.Bのインラインブロック：

.b 
 
{ 
 
    width:100px; 
 
    height:100px; 
 
    background-color:gray; 
 
} 
 

 
.b:before 
 
{ 
 
    content:"a"; 
 
    color:white; 
 
    display:inline-block; 
 
    width:50%; 
 
    height:50%; 
 
    background-color:rgb(40,40,40); 
 
    margin:20px 0 0 20px; 
 
}

<div class="b"></div>