CSS移動一個div垂直向下

我試着去移動一個div另一個DIV中了一點，但是當我使用CSS移動一個div垂直向下

margin-top: 10px;

這使得在頂部有一個白色的差距。繼承人的HTML：

<div id="topb"> 
    <div id="selection"> 

    </div> 
</div>

而且繼承人的CSS：

#topb { 
    background: url(images/tomato-background.jpg) no-repeat fixed; 
    background-size: cover; 
    height: 100%; 
    width: 101%; 
    margin-left: -10px; 
} 

#selection { 
    background-color: #4d4d4d; 
    width: 60%; 
    height: 500px; 
    margin: auto; 
    margin-top: 40px; 
}

而且繼承人的網站的截圖：

來源

2016-10-15 Lachlan Mather

看起來你在#selection中有一個40px的頁邊距。您的保證金頂部10px在哪裏？ – Joel

也許你可以通過添加padding-top:10px;來修改父元素，而不是修改子元素。

來源

2016-10-15 22:12:36 n1kkou

在#selection刪除邊距風格，並應用padding- top to #topb

來源

2016-10-15 22:09:56 Olga

沒有做任何事情。從字面上看。看起來像這樣：http://imgur.com/a/eOfPh –

錯誤的ID，對不起 – Olga

哦，謝天謝地它的作品。謝謝親愛的 –

這是一個「崩潰邊緣」問題。已經回答了這個問題： Why would margin not be contained by parent element?

你將不得不更改父div來：（1）添加邊框，（2）位置絕對的，（3）顯示爲內聯塊，（4）溢出自動。

請參閱張貼的鏈接瞭解更多詳情。

來源

2016-10-15 22:12:05 Simon

爲此，您可以使用position: absolute。下面是代碼：

#topb { 
 
    background: url(images/tomato-background.jpg) no-repeat fixed; 
 
    background-size: cover; 
 
    height: 100%; 
 
    width: 101%; 
 
    margin-left: -10px; 
 
} 
 

 
#selection { 
 
    background-color: #4d4d4d; 
 
    width: 60%; 
 
    height: 500px; 
 
    margin: auto; 
 
    position: absolute; 
 
    top: 40px; /*This is where it is changed as well as the line above*/ 
 
}

希望它能幫助！我認爲填充仍然會留下背景，所以這是一個更好的主意。

來源

2016-10-15 22:18:58

這是工作fiddle希望它可以幫助。

position:absolute; 
position:relative;

來源

2016-10-15 22:23:02

這是因爲當在另一個塊元素中有一個塊元素（display：block）時，邊距將會摺疊。它只會被認爲是最大的利潤。

因此，在您的示例中，它只會考慮其中一個邊距（40px）。 See reference about collapsing margins。

有幾種解決方法。選擇任一：

使用padding，而不是margin爲內部組件。
更改display類型。例如display: inline-block。
使用absolute定位。

來源

2016-10-15 22:37:50

CSS移動一個div垂直向下

回答

相關問題