一、首先，我們先設計一個div，並且給這個div新增一個id，id名隨意取。然後設定一下寬高，並且新增一個紅色的背景屬性值。預設情況下，這個div是靠近瀏覽器的頂部和左邊的。二、接著我們給這個div設定一下margin值，從左到右表示的是上邊，右邊，下邊，左邊的margin值。設定好之後，可以看到左邊和上邊都隔開了一定的距離，這就是margin值的用處，而下邊和右邊因為沒有其他div或者其他顏色，所以效果被忽略了。當然，margin值也可以分開寫，比如我只設定div的上邊的margin值，就可以使用margin-top，而右邊則可以使用margin-right，左邊則是margin-left，下邊則是margin-bottom。三、設定margin-top之後，只有上邊拉開了距離，而左邊並沒有拉開距離。接著我們再在網頁中新增一個div，並設定id為“you”。接著設定“you”這個div的寬高和背景。四、新新增一個div之後，如果沒有設定margin-bottom的值，兩個div就會連在一起。然後我們給上面的div，也就是“my”,設定margin-bottom。設定好之後，兩個div之間就會拉開距離，這樣就可以定位好div的位置。五、如果我們給“my”設定好margin-bottom之後，又給“you”設定margin-top，又會有什麼結果呢?結果就是這樣：有兩個相鄰的div，如果一個div設定了margin-top，另一個設定了margin-bottom，則以它們之間值最大的為準。六、比如margin-top是50畫素，margin-bottom是30畫素，則間隔就是50畫素，而不是兩個相加哦。瞭解這個之後，在網頁佈局中，我們只需要對其中一個設定就可以了。