保證金頂部不適用於div elet

Question

所以我正在試驗一個簡單的佈局。它基本上是一個有很多圖片的訪談佈局。

這是我下面的基本概念：

-intro

-photos

-interview

我把一個邊距到<div id="interview">但它不工作。爲什麼？我認爲我的佈局結構存在問題（如果您點擊鉻合金中的檢測元素）

如何解決這個問題？鏈接：http://mysecretathens.gr/kulte_test/osterman.html

Answer 1

一個乾淨的方法來解決這個問題是將「overflow：hidden」添加到photos元素。

#photos {overflow:hidden;} 

Answer 2

那是因爲你還沒有被清除的浮動元素，只是清除浮動聲明<div id="interview">像在此之前，比使用margin-top: /* Whatever px */

<div style="clear: both;"></div> 
<div id="interview"> 

而且看你的網站，你正在使用在着陸頁上沉重的圖像，這將惱人任何用戶帶寬低，我建議你看看lazy loading

Answer 3

它「不起作用」，因爲上面的所有圖像都是浮動的 - 因此不會跨越它們的父元素的高度。

將overflow:hidden添加到您的#photos div中，以便它包含所有圖片並且不會將它們浮動出來 - 然後下面元素上的頁邊距將按預期工作。