2013-02-05 4 views
0

나는 CSS 문제가 있습니다. '아무튼 아래 위 컨테이너 사업부 외부의 20 픽셀 마진이되도록, 대신 그들은 "넘치다", H4의CSS 하위 마진은 부모를 확장하지 않습니다.

<div class="footer-container" style="background: #ff00ff"> 
<footer class="wrapper"><h4 style="margin: 20px 0">Some Headline</h4></footer> </div> 

수직 마진이 컨테이너 사업부를 확장하지 않는 다음 레이아웃을 고려 배경색이 없습니다. 인접 요소의 수직 여백이 줄어들지 만 이것이 다른 것처럼 보입니다.

답장을 보내 주셔서 감사합니다.

+1

CSS에는 접히는 여백이라고하는 것이 있습니다. http://www.w3.org/TR/CSS21/box.html#collapsing-margins – Jrod

답변

3

당신의 붕괴 마진 문제를 해결하는 것입니다 당신이 포함 사업부에 overflow:auto 추가 : 해키의

<div class="footer-container" style="background: #ff00ff;overflow:auto"> 

jsFiddle example

+0

이것은 아마도 대부분의 사람들에게 이상하게 보입니다. 왜 이것이 효과가 있는지 설명해 주시겠습니까? 또한 마진이 붕괴되지 않는 다른 상황에 대한 목록이 있습니다 (http://reference.sitepoint.com/css/collapsingmargins). – showdev

+0

좋습니다, 감사합니다. 그래서, 이것이 사양에 따라 떨어지는 방법입니까? – user1870482

+0

@ user1870482 - 예. – j08691

0

종류를하지만 당신은 당신이에 padding: .1px 0를 사용할 수있는 몇 가지 이유 overflow: auto을하지 않으려면 부모는 모든 최신 브라우저에서 0으로 렌더링됩니다.

관련 문제