如何消除 div 之间的间隙 - CSS

在开发网页时，我们常常会使用多个 div 元素来布局，但是这些元素之间会存在间隙，这会影响到页面布局的美观度。那么，如何消除这些间隙呢？

一、什么是div之间的间隙？

在使用 div 元素进行网页布局时，元素之间会存在一些间隙，这是由于 div 元素默认情况下是 display: block; 属性，会独占一行空间，因此在不设置 margin 和 padding 的情况下，元素之间会存在间隙。

二、如何消除div之间的间隙？

1. 使用负 margin

使用负 margin 可以将相邻的两个 div 元素的间隙消除。例如，下面的代码片段中，我们将第二个 div 元素的 margin-top 属性设置为负值，使其上移消除与第一个 div 元素之间的间隙。

div {
  width: 100px;
  height: 100px;
}

div:first-child {
  background-color: red;
}

div:last-child {
  background-color: blue;
  margin-top: -4px;
}

2. 设置 font-size 和 line-height 为0

在包含多个 div 元素的容器中，设置父元素的 font-size 和 line-height 属性为0，可以消除子元素之间的间隙。

.container {
  font-size: 0;
  line-height: 0;
}

.container div {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: red;
}

3. 使用 flex 布局

使用 flex 布局可以更好地控制元素之间的间隙。在父元素上设置 display: flex; 属性，子元素之间的间隙就会消失。

.container {
  display: flex;
}

.container div {
  width: 100px;
  height: 100px;
  background-color: red;
}

总结

本文介绍了三种方法来消除 div 元素之间的间隙，这样就可以更好地控制页面的布局，提升网站的美观度。