내부 사업부는 외부 사업부

나는이 div의 하나 다른 내부를 아래로 밀어내부 사업부는 외부 사업부

/****** MAIN ******/ 
#main_content { 
    position: relative; 
    top: -60px; 
    z-index: 1; 
    background-color: #FFFFFF; 
    width: 1248px; 
    margin: 0 auto; 
} 
/****** END OF: MAIN ******/ 

/****** PAGE TITLE ******/ 
#page_title { 
    position: relative; 
    margin-top: 100px; 
    background: red url("img.png") no-repeat 50% 50%; 
    height: 20px; 
    width: 1300px; 
}

문제는 내가 추가 할 때이다 'margin-top : 100px;' #page_title (내부 div)으로 바깥 쪽 div도 100 픽셀 씩 "내립니다". 그러면 body color를 볼 수 있습니다. 나는 마진이 전혀없는 것처럼 바깥 쪽 div를 유지하고 싶습니다. 이것을 어떻게 할 수 있습니까? 나는 overflow : auto가 이것을 해결해야한다는 것을 알았지 만 (그것은 다소 그렇다), outer div는 평소보다 낮게 놓는다. 다른 방법이 있습니까? 고마워요!

출처

2013-05-21 Fygo

이 현상을 * margin collapse *라고합니다. – cimmanon

당신이하려는 일이 명확하지 않습니다. 예를 들어, 페이지 제목의 높이를 20px로 설정하는 이유는 무엇입니까? 텍스트가 빨간색 배경 내에 있어야합니까? 그리고 왜 main_content에 -60px를 설정해야합니까? 당신이하려고하는 것에 대한 이미지를 게시 할 수 있습니까? –

또 다른 방법은'flex-boxes'를 사용하는 것입니다. '#main_content {display : flex; 신장 : 자동; 플렉스 방향 : 칼럼; 플렉스 랩 : 포장, ' – jake123

바깥 쪽의 margin-top을 바깥 쪽 padding-top으로 바꿉니다. 마찬가지로 overflow:hidden 또는 overflow:auto을 바깥쪽에 넣으면 불필요한 자르기 또는 스크롤 막대가 발생할 수 있습니다.

출처

2013-05-21 19:20:03

이것은 그 것이다! 나는 실제로 overflow : auto를 사용하고 싶지 않았다. 이것은 자동으로 내부 클립을 자르고 (바깥 쪽보다 더 넓어서 그런 식으로 머물러 야 할 필요가있다.) 대단히 감사한다. – Fygo

내부 사업부는 외부 사업부

답변

관련 문제