CSS 여백 붕괴 문제 해결

html
css

2011-03-15 4 views 1 likes

같은 HTML을 가지고 있다고 가정

<body id="doc"> 

    <div id="container"> 
    ddd 
    </div> 

</body>

그리고 내 CSS는

입니다

#doc { 
    margin-top:0; 
    width: 480px; 
    height: 320px; 
    background-color: red; 
    overflow:auto; 
} 

#container { 
    text-align: center; 
    width: 400px; 
    background-color: green; 
    margin: 10px; 
}

#doc { 
    margin-top:0; 
    width: 480px; 
    height: 320px; 
    background-color: red; 
    overflow:auto; 
} 

#container { 
    text-align: center; 
    width: 400px; 
    background-color: green; 
    margin: 10px; 
}

그것은 오버 플로우를 사용하여 보인다 : 자동 도움이되지, 어떤 생각?

출처

2011-03-15 Howard

간단한 수정이 TU가 컨테이너에 패딩이 아닌 여백을 사용하는 것입니다. – meo

여기를 참조하십시오 : http://stackoverflow.com/questions/5249756/why-are-my-divs-margin-effected-by-content-blocks-inside-of-it/5249872#5249872 - 많은 기술 목록 이 문제를 "고칠"수 있습니다. – thirtydot

답변

명확한를 수행하여 마지막 요소까지 스트레칭 낮은 수준을 강제로 :

<style> 
    #doc { 
     margin-top:0; 
     width: 480px; 
     height: 320px; 
     background-color: red; 
     overflow:auto; 
    } 

    #container { 
     text-align: center; 
     width: 400px; 
     background-color: green; 
     margin: 10px; 
    } 


    #stretchmyparent { 
     clear:both; 
    } 
    </style> 

    <body id="doc"> 
     <div id="container"> 
     ddd 
     </div> 

     <div id='stretchmyparent'></div> 
    </body>

출처

2011-03-15 10:26:27

CSS 여백 붕괴 문제 해결

답변

관련 문제