여백 : 입력 <a href="http://codepen.io/Chiz/pen/NAmdvr" rel="nofollow">http://codepen.io/Chiz/pen/NAmdvr</a></p> <p>: 의사 요소 앞에, 나는 20 픽셀 각각의 상단과 왼쪽 여백을 설정 요소

Question

내 codepen를 참조하기 전에.

그러나 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입니다. 그 결과 요소 대신에 :before 의사 요소 블리드 아웃의 여백이 생깁니다. 수평 여백에서는 발생하지 않습니다. this answer을 참조하십시오.

상자가 요소 또는 의사 요소에 속하는지 여부에 관계없이 여백 축소 동작이 동일합니다. 즉, CSS에 관한 한, 두 상자는 인접한 위쪽 여백을 가진 흐름 상자 상자입니다.이 상자가 요소 또는 유사 요소에 의해 생성되었는지 여부는 귀하의 :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>