在CSS設(shè)置中，盒模型是一項常見技術(shù)，其中margin設(shè)置具有一些規(guī)則。margin指的是盒子與盒子之間的邊距。有幾種寫法可以實現(xiàn)這個效果。下面通過代碼來進(jìn)行詳細(xì)解析。 創(chuàng)建四個div 首先我們創(chuàng)

在CSS設(shè)置中，盒模型是一項常見技術(shù)，其中margin設(shè)置具有一些規(guī)則。margin指的是盒子與盒子之間的邊距。有幾種寫法可以實現(xiàn)這個效果。下面通過代碼來進(jìn)行詳細(xì)解析。

創(chuàng)建四個div

首先我們創(chuàng)建了一個父級div，id選擇器為"cont"，并包含三個子div。我們通過CSS設(shè)置不同的寬度和顏色來區(qū)分它們。

CSS樣式設(shè)置

使用以下CSS代碼設(shè)置樣式：

cont {
  height:120px;
  width:600px;
  background:gray;
}
test {
  height:20px;
  width:100px;
  background:yellow;
}
test2 {
  height:20px;
  width:100px;
  background:red;
}
test3 {
  height:20px;
  width:100px;
  background:purple;
}

左浮動效果

為了讓子div都左浮動，我們給它們添加了float:left;的樣式屬性。

設(shè)置margin值

我們對子div的id選擇器為"test"的設(shè)置了一個margin值為10px，那么它們之間的距離就是10px。

test {
  height:20px;
  width:100px;
  background:yellow;
  margin:10px;
}

多個margin值的效果

如果在10px后再添加20px，那么上下方向的邊距仍然是10px，而左右方向的邊距變成了20px。

按順序取值

如果我們繼續(xù)添加30px，上邊的邊距是10px，右邊是20px，下邊是30px，而左邊的值則繼續(xù)沿用右邊的20px。

從上述例子可以看出，margin的取值順序是從上到下、從右到左。如果缺省沒有指定某個方向的邊距，則會取相對應(yīng)的相鄰邊距的值。