css与旁边盒子距离

CSS中的盒子模型是用来描述网页元素的布局和定位的一种方式。盒子模型由四个部分组成：内容区域、内边距、边框和外边距。其中，外边距是指盒子与周围元素之间的距离。

在CSS中，可以使用margin属性来设置盒子的外边距。margin属性可以接受四个值，分别表示上、右、下、左四个方向的外边距。也可以使用margin-top、margin-right、margin-bottom和margin-left分别设置上、右、下、左四个方向的外边距。

下面是一个示例代码，展示了如何使用margin属性设置盒子的外边距：

.box {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 20px;
}

在上面的示例代码中，box类表示一个盒子元素。设置了盒子的宽度为200px，高度为200px，背景颜色为红色。使用margin属性设置了盒子的外边距为20px。这意味着盒子与周围元素之间会有一个20px的距离。

除了可以使用固定的像素值来设置外边距，还可以使用百分比、em、rem等单位。例如，可以使用margin: 10%来设置盒子的外边距为其父元素宽度的10%。这样可以实现响应式布局，使盒子的外边距随着父元素的大小而变化。

还可以使用负值来设置外边距，从而实现盒子与周围元素之间的重叠效果。例如，使用margin-top: -10px来设置盒子的上外边距为-10px，盒子就会与上方的元素重叠。

需要注意的是，盒子的外边距会影响到盒子的位置和布局。如果两个盒子的外边距发生重叠，那么它们之间的距离将取两个外边距中较大的那个值。这是因为CSS规范中规定了外边距的重叠行为，用于简化布局。

CSS中的外边距是用来设置盒子与周围元素之间的距离的。通过使用margin属性，可以设置盒子的外边距，并且可以使用不同的单位和负值来实现不同的效果。外边距的重叠行为需要注意，可以通过调整外边距的值来控制元素之间的距离。