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

Question

어린이 요소의 여백 위쪽에 약간 문제가 있습니다.

CSS :

body { 
    height: 960px; 
} 
.breadcrumbs { 
    position: relative; 
    background-color: #eee; 
    height: 10%; 
} 
.name { 
    color: #000; 
    margin-top: 50px; 
} 

http://jsfiddle.net/GRQNh/

가 작동하지 않는 이유는 무엇입니까? 클래스 .name 위에 sticky.

미리 감사드립니다.

Answer 1

대로 요소를 차단되지 <span> 및 <span>를 사용하고, 그래서 마진이 작동하려면 당신은 그것을 display: block 또는 display: inline-block 중 하나가 필요합니다.

<span>에 display: block을 추가하면 효과가 동일하므로 <div>을 대신 사용할 수 있습니다.

Answer 2

Demo 업데이트 CSS는 예에서

.name { 
    color: #000000; 
    display: inline-block; 
    margin-top: 50px; 
} 

Answer 3

이 작동하는 방법입니다

.name{ 
display:block; 
padding-top: 50px; 
color: #000; 
} 

Answer 4

봅니다 .name 속성 display:inline-block;가 도움이 클래스에 추가