與邊距內DIV下推外層div

我有兩個div，其他的一個內：與邊距內DIV下推外層div

<div id="main_content"> 
    <div id="page_title"> 
     <h1>This is the title of the page</h1> 
    </div> 
    Halo halo halo 
</div>

而CSS：

/****** 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像素，所以我可以看到它下面的身體顏色。我想保留外部div，因爲它是完全沒有保證金的。我怎樣才能做到這一點？我發現溢出：汽車應該解決這個問題（它有點兒），但它把外部股利比通常低。有沒有其他的方法？非常感謝！

來源

2013-05-21 Fygo

這種現象被稱爲* margin collapse *。 – cimmanon

目前尚不清楚你在做什麼。例如，爲什麼將頁面標題的高度設置爲20px？文本是否應該在紅色背景之內？爲什麼設置頂部：-60px在main_content中？你能發佈你想要做的事嗎？ –

另一個要做的就是使用'flex-boxes'如此 '#main_content {display：flex; 身高：自動;柔性方向：列; flex-wrap：wrap;' – jake123

用padding-top替換margin-top就可以修正內部的問題。正如將overflow:hidden或overflow:auto放在外部，儘管這些可能會導致不必要的剪輯或滾動條。

來源

2013-05-21 19:20:03

這就是它！我確實不想使用overflow：auto，因爲這會「剪切」內部剪輯（比外部剪輯更寬，並且需要以這種方式保持）。非常感謝！ – Fygo

與邊距內DIV下推外層div

回答

相關問題