1. 首頁 > 云知道 > >

網頁設計中margin怎么用

云知道網頁設計


網頁設計中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【網頁設計中margin怎么用】結果就是這樣：有兩個相鄰的div，如果一個div設置了margin-top，另一個設置了margin-bottom，則以它們之間值最大的為準 。比如margin-top是50像素，margin-bottom是30像素，則間隔就是50像素，而不是兩個相加哦 。了解這個之后，在網頁布局中，我們只需要對其中一個設置就可以了 。

    推薦閱讀