盒模型的margin详解

2024-07-17

3499

在CSS设置中，盒模型是一项常见技术，其中margin设置具有一些规则。margin指的是盒子与盒子之间的边距。有几种写法可以实现这个效果。下面通过代码来进行详细解析。创建四个div 首先我们创

在CSS设置中，盒模型是一项常见技术，其中margin设置具有一些规则。margin指的是盒子与盒子之间的边距。有几种写法可以实现这个效果。下面通过代码来进行详细解析。

创建四个div

首先我们创建了一个父级div，id选择器为"cont"，并包含三个子div。我们通过CSS设置不同的宽度和颜色来区分它们。

CSS样式设置

使用以下CSS代码设置样式：

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;的样式属性。

设置margin值

我们对子div的id选择器为"test"的设置了一个margin值为10px，那么它们之间的距离就是10px。

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

多个margin值的效果

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

按顺序取值

如果我们继续添加30px，上边的边距是10px，右边是20px，下边是30px，而左边的值则继续沿用右边的20px。

从上述例子可以看出，margin的取值顺序是从上到下、从右到左。如果缺省没有指定某个方向的边距，则会取相对应的相邻边距的值。