1. 前言
CSS中的<div>是一个非常强大的标签，可以被用来创建网站的布局。设置<div>之间的距离是一个常见的问题，因为元素之间的间距会影响网站的整体外观。
2. 使用margin属性来设置距离
在CSS中，margin属性可以通过设置四个方向的值来控制元素之间的距离，其语法如下：
/* margin: top right bottom left; */
margin: 10px 5px 15px 20px;
上面的代码设置了一个元素的上、右、下和左边距分别为10像素、5像素、15像素和20像素。如果某一方向不需要设置距离，可以使用auto关键字来代替值：
/* margin: top right bottom left; */
margin: 10px auto;
上面的代码表示将元素的上、下边距设置为10像素，左、右边距自动居中（当元素的宽度小于包含它的容器宽度时，左右边距将自动拉伸）。
2.1 使用margin属性设置公共值
如果需要将所有四个方向的边距设置为相同的值，可以简写为下面这样：
/* margin: x; */
margin: 20px;
这个属性设置需要格外小心，因为如果父级容器放置了多个标签，那么你的标签之间会产生交叉冲突。margin合并，指当外边距发生重叠时，只会出现一个外边距。
margin合并的规则：
当相邻的两个元素都没有边框、内边距和内容时，它们的上下边距会合并。
当相邻的两个元素的上下边距中，其中一个元素有边框或内边距时，较大的相邻边距会被保留，较小的相邻边距将被消除。
当相邻的两个元素之间存在空隙时（如折行换行符）不会发生 margin 合并。
当父元素没有边框、内边距和内容时，子元素的外边距会和父元素的外边距合并。
2.2 使用margin属性处理CSS网格
使用margin属性可以非常方便地控制CSS网格的外观。下面的示例演示了如何将元素分为多个网格，并使用margin属性设置网格之间的距离：
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
/* 100% width on mobile devices */
.col-12 {
width: 100%;
}
/* 50% width on tablets */
@media only screen and (min-width: 768px) {
.col-m-6 {
width: 50%;
}
}
/* 33.33% width on desktops */
@media only screen and (min-width: 992px) {
.col-4 {
width: 33.33%;
}
}
/* 25% width on large desktops */
@media only screen and (min-width: 1200px) {
.col-3 {
width: 25%;
}
}
/* Margin between rows*/
.row {
margin-bottom: 20px;
}
上面的CSS代码使用了单个div元素以及一些CSS属性，创建了一个简单的网格布局。CSS中的media queries允许web开发人员根据不同的屏幕宽度，应用不同的CSS规则。
3. 使用padding属性来处理间隙
另一个控制元素间隙的方法是使用padding属性。padding属性会在元素的内容和边框之间创建间隙，其语法如下：
/* padding: top right bottom left; */
padding: 10px 5px 15px 20px;
上面的代码设置了一个元素内容的上、右、下和左边距分别为10像素、5像素、15像素和20像素。
和margin不同，padding属性的设置不会影响到其他元素或其他盒子模型部分。padding是在所有其他部分的内部的增加间隙。
3.1 text-align属性
CSS中的text-align属性用于控制文本在其父元素内的对齐方式，其语法如下：
/* text-align: value; */
text-align: center;
上面的代码将元素内的文本居中对齐。text-align属性可用值为left、center和right。如果需要在容器中水平居中一个元素的内容，可以将容器的text-align属性设置为center，如下所示：
.container {
text-align: center;
}
.container div {
display: inline-block;
}
上面的CSS代码将一个<div>元素居中，容器需要拥有一个text-align:center的属性。通过将内部div元素的display属性设置为inline-block，可以防止它占用整个行，从而让它在容器居中显示。
4. 使用display属性控制距离
CSS中的display属性控制HTML元素在页面中如何显示。改变元素的display属性可以控制元素之间的距离和布局。可以使用多个display值来设置元素的布局。
4.1 使用flexbox布局
CSS3中引入了一个新的布局模式——Flexbox布局。Flexbox使元素之间的布局变得更加简单，灵活性更强。使用Flexbox布局可以轻松地创建具有不同大小和形状的布局。
Flexbox布局有两个主要的部分：容器和项目。容器定义了项目的布局方式，项目则是容器的子元素。
下面是一个简单的Flexbox布局：
.container {
display: flex;
justify-content: space-around;
}
.item {
flex: 1;
margin: 0 10px;
}
上面的代码将创建一个Flexbox容器，其包含两个flex元素。justify-content属性是用于在主轴上对元素进行对齐的。space-around值表示每个元素之间的间距是相等的，元素与容器边框的距离也相等。
4.2 使用grid布局
CSS Grid布局模块是一种二维布局系统，可用于在行和列的交叉点处放置元素。这个系统让我们能够快速创建具有复杂布局的网站。使用CSS Grid，开发人员可以创建网格中的区域，并将元素放置在这些区域中。
CSS Grid布局可以用下面的CSS代码实现：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.item {
border: 1px solid #000;
padding: 10px;
}
上面的代码设置了一个由3列组成的网格，每一列宽度被分割为1份。grid-gap属性用于控制行和列之间的间距，其值可以为像素、em或百分比。
5. 总结
本文介绍了几种不同的方法，可以使用CSS来设置元素之间的距离和间隙。使用margin和padding属性可以非常方便地设置元素的外部和内部间距。Text-align属性可以用于控制文本在其容器中的对齐方式，而Flexbox和Grid布局则可以用于创建复杂的布局。在实际工作中，选择何种方法来控制网站的外观通常取决于许多因素，如团队成员的技能水平、项目的大小和规模，以及预期的浏览器支持。