마진 상단이 작동하지 않습니다.

Question

마진을 사용하면 왼쪽으로 작동합니다. 그러나 margin-top은 작동하지 않습니다. 누구나 작동하는지, 다른 작동하지 않는지 누구나 알 수 있습니까?

HTML 코드

<div id="footer"> <!-- BEGIN FOOTER --> 
<p class="copyright"> Copyright © </p> 
</div> <!-- END FOOTER --> 

CSS는

#footer { 

background-image: url(../website/images/footer.png); 
width: 1200px; 
height: 100px; 

} 

p.copyright { 

margin-top: 10px; 
margin-left: 120px; 

} 

Answer 1

그것은 마진 붕괴라고 밖으로 this

#footer { 
    background-image: url(../website/images/footer.png); 
    width: 1200px; 
    height: 100px; 
    position:absolute; 
} 

p.copyright { 
    background-color:red; 
    margin-top: 10px; 
    margin-left: 120px; 
}​ 

Answer 2

보십시오. 하나의 블록 요소가 다른 블록 요소의 하위 요소 일 때 발생합니다. 여기에 문제를 해결할 수있는 몇 가지 방법이 있습니다.

1-

는 요소 패딩

-3- 변화 위치 속성

2- 추가 1 픽셀에 테두리를 추가한다. 절대적으로 상대적으로 배치 된 상자의 여백은 붕괴되지 않습니다.

내가 최근에 더 here

Answer 3

이 시도 참조 자세한 내용은 해당에 대한 블로그 게시물을 작성했습니다 : -

#footer { 
    background-image: url(../website/images/footer.png); 
    width: 1200px; 
    height: 100px; 
    overflow:hidden; // add overflow 
    } 

    p.copyright { 
    margin-top: 10px; 
    margin-left: 120px; 
    } 

감사합니다 ...