CSS学习：如何为三个自定义样式的div元素添加间距

嘿，刚学CSS碰到这种布局问题太正常啦！给这三个紧密排列的div加间距，有好几种简单又常用的方法，我一个个给你拆解清楚，你可以根据自己的需求选：

方法1：用margin属性（最基础直接） #

margin是控制元素外部间距的属性，和你已经在用的padding（内部内容与边框的距离）刚好对应。因为div默认是块级元素，会上下堆叠，所以我们只要给它们设置上下方向的margin就行：

示例代码（修改你的原有CSS）： #

div.one{ 
  Border:1px solid; 
  Padding:25px 50px 75px; 
  Background-color:lightblue;
  margin-bottom: 15px; /* 给第一个div底部加15px间距 */
}
div.two{ 
  Border:1px solid; 
  Padding:25px 50px; 
  Background-color:lightblue;
  margin-bottom: 15px; /* 给第二个div底部加15px间距 */
}
div.three{ 
  Border:1px solid; 
  Padding:25px; 
  Background-color:rgb(33,56,78);
}

这样前两个div和后面的元素之间就有了15px的间距，最后一个div不用加margin-bottom，避免在页面底部多出不必要的空白。

你也可以用更简洁的写法，给所有div统一设置margin，再调整最后一个的样式：

div.one, div.two, div.three {
  margin: 0 0 15px 0; /* 顺序是上、右、下、左，这里只设置底部15px */
}
/* 给最后一个div取消底部margin */
div.three {
  margin-bottom: 0;
}

方法2：用相邻兄弟选择器（批量处理更省心） #

如果你不想一个个给div加样式，可以用CSS的相邻兄弟选择器+，它会选中紧挨着另一个div的div，也就是从第二个div开始的所有元素：

/* 给所有跟在div后面的div添加顶部间距 */
div + div {
  margin-top: 15px;
}

/* 你的原有CSS保持不变 */
div.one{ Border:1px solid; Padding:25px 50px 75px; Background-color:lightblue; }
div.two{ Border:1px solid; Padding:25px 50px; Background-color:lightblue; }
div.three{ Border:1px solid; Padding:25px; Background-color:rgb(33,56,78); }

这种写法很灵活，哪怕以后再添加新的div，也会自动继承间距样式，不用重复修改代码。

方法3：用Flexbox的gap属性（现代布局首选） #

如果你愿意尝试更现代的布局方式，Flexbox的gap属性是最优解——它专门用来控制Flex容器内元素之间的间距，不会在容器的首尾产生多余空白：

首先给这三个div的父容器（比如如果它们直接在<body>里，就给body加样式；如果有专门的容器，就给容器加）设置Flex布局：

/* 假设父容器是body，或者你可以给父div加个类名比如.container */
body {
  display: flex;
  flex-direction: column; /* 让元素保持上下排列，默认是横向的row */
  gap: 15px; /* 元素之间的间距，这里是上下方向 */
}

然后你的原有div样式可以完全保持不变，这样三个div之间就自动有了15px的间距，而且不会在页面最顶部或底部多出间距，非常省心。

内容的提问来源于stack exchange，提问作者Azher shah