상단 여백이 작동하지 않습니다.

Question

죄송합니다, 저는 CSS에 초보자입니다. 나는 여백을 볼 것으로 예상 margin-top: 140 px;box-B에 적용 한편시

.box-A{ 
    background-color: red; 
    padding: 30px; 
    margin: auto; 
    border: 13px solid green; 
    margin-bottom: 40px; 
} 

.box-B{ 
    background-color: blue; 
    padding: 40px; 
    margin-top: 140 px; 
} 

그것은 box-A 제대로 작동 : 내가 여기에 다음과 같은 CSS를 적용하는 것을 시도했다

<div class="box-A" >Box A is here</div> 
<div class="box-B" >Box B is here</div> 

과 : 나는 다음과 같은 HTML을 2 상자 사이에 180px 주위. 하지만 아무 일도 발생하지 않습니다. margin-top이 효과가없는 이유를 말씀해 주시겠습니까?

Answer 1

px와 숫자 사이에 공백을 사용하지 마십시오. 두 값 (상단 및 하단)의 가장 큰 허용되는 일어날 수 w3 schools css margin-top property에 관한

.box-B{ 
    background-color: blue; 
    padding: 40px; 
    margin-top: 140px; 
} 

Answer 2

.

여백 축소. 요소의 위쪽 및 아래쪽 여백은 두 개의 여백 중 가장 큰 것과 동일한 단일 여백으로 축소됩니다. 가로 여백 (왼쪽 및 오른쪽)에서 발생하지 않습니다! 세로 여백 (상단 및 하단) 만!