부모님이 아닌 CSS 여백

"컨테이너"과 "콘텐츠" 두 개의 div가 있습니다. 콘텐츠가 컨테이너 내부에있는 경우 컨테이너에 적합합니다.부모님이 아닌 CSS 여백

#container { 
    display:block; 
    width:300px; 
    margin:auto; 
    background:green; 
} 
#content { 
    display:block; 
    margin:20px; /* HERE IS THE ERROR */ 
    background:yellow; 
}

상단 여백과 하단 여백은 내부 부모가 아니고 왼쪽과 오른쪽입니다.

왜 이런 일이 발생합니까?

편집 :JSFIDDLE example:

출처

2013-07-31 Giovanne Afonso

마진 붕괴. 내용을 배치하려면 컨테이너에서 패딩을 사용하십시오. 또는 컨테이너의 상단 여백이 설정되지 않았는지 확인하십시오. – ProfileTwist

이 margin collapsing 때문이다 - 블록 레벨 요소의 첫 번째 자식의 상단 여백 (그것은 또한 수준을 차단할 수있어 가정하고 normal flow에 참여) 항상의 위쪽 여백과 함께 붕괴됩니다 그것의 부모.

이 문제를 해결하는 방법 중 하나는 자식 div가 inline-block 인 change the display value입니다.

#content { 
    background: yellow; 
    display: inline-block; 
    margin: 20px; 
}

^{참고 : AndyG는 지적이 많은 다른 방법들 padding or borders on the container div를 사용하여 무너 마진을 방지 할 수 있습니다. 전체 목록은 spec을 참조하십시오.}

출처

2013-07-31 15:59:50 Adrift

다른 방법 중 하나는 컨테이너 (상위) 요소에'padding : 1px;'를 추가하는 것입니다. –

그게 실제로 가장 좋은 방법입니다, 나는 부모와 자녀 사이의 패딩이나 경계도 붕괴를 잊어 버렸습니다. 감사합니다 – Adrift

원하는 경우 답변에 추가 할 수 있습니다.) –

옆 수행 할 수 있습니다

추가 오버플로 : 숨겨진; 부모에게;
테두리 추가 :이 테두리처럼 : 1 픽셀 단색 투명; 부모 부모

추가 패딩

#container { 
    background: green; 

    border: 1px solid transparent; 

    display: block; 
    margin: auto; 
    width: 300px; 
} 
#content { 
    background: yellow; 
    display: block; 
    margin: 19px; /* because 1px for parent border */ 
}

예 http://jsfiddle.net/3cXys/

출처

2013-07-31 16:02:43 Belyash

부모님이 아닌 CSS 여백

답변

관련 문제