網頁設計中margin怎麼用

網頁佈局中margin也是必不可少的，那麼在網頁設計佈局中，margin應該怎樣使用呢？

操作方法

（01）首先，我們先設計一個div，並且給這個div新增一個id，id名隨意取。

（02）然後設定一下寬高，並且新增一個紅色的背景屬性值。

（03）預設情況下，這個div是靠近瀏覽器的頂部和左邊的。

（04）接著我們給這個div設定一下margin值，從左到右表示的是上邊，右邊，下邊，左邊的margin值。

（05）設定好之後，可以看到左邊和上邊都隔開了一定的距離，這就是margin值的用處，而下邊和右邊因為沒有其他div或者其他顏色，所以效果被忽略了。

（06）當然，margin值也可以分開寫，比如我只設定div的上邊的margin值，就可以使用margin-top，而右邊則可以使用margin-right，左邊則是margin-left，下邊則是margin-bottom。

（07）如圖，設定margin-top之後，只有上邊拉開了距離，而左邊並沒有拉開距離。

（08）接著我們再在網頁中新增一個div，並設定id為“you”。

（09）接著設定“you”這個div的寬高和背景。

（10）如圖所示，新新增一個div之後，如果沒有設定margin-bottom的值，兩個div就會連在一起。

（11）然後我們給上面的div，也就是“my”,設定margin-bottom。

（12）設定好之後，兩個div之間就會拉開距離，這樣就可以定位好div的位置。

（13）而如果我們給“my”設定好margin-bottom之後，又給“you”設定margin-top，又會有什麼結果呢？

（14）結果就是這樣：有兩個相鄰的div，如果一個div設定了margin-top，另一個設定了margin-bottom，則以它們之間值最大的為準。比如margin-top是50畫素，margin-bottom是30畫素，則間隔就是50畫素，而不是兩個相加哦。瞭解這個之後，在網頁佈局中，我們只需要對其中一個設定就可以了。