[分享]css中div之间有缝隙

我们在使用CSS来布局页面时，经常会碰到一个问题：在两个div之间有不必要的缝隙。这个问题的原因是因为HTML元素之间有默认的外边距(margin)和内边距(padding)。如果这些边距没有被清除或...

我们在使用CSS来布局页面时，经常会碰到一个问题：在两个div之间有不必要的缝隙。

这个问题的原因是因为HTML元素之间有默认的外边距(margin)和内边距(padding)。如果这些边距没有被清除或覆盖，就会在div之间产生间隙。

 <div class="box1"></div>
   <div class="box2"></div>
   
   .box1 {
      background-color: red;
      height: 100px;
   }
   
   .box2 {
      background-color: blue;
      height: 100px;
   } 

以上代码会产生一个问题：box1和box2之间会有4px的间隙。这是因为默认情况下，div元素有一个外边距(margin)的值为8px。

为了解决这个问题，我们可以使用CSS的reset样式表，或手动重置元素的边距。

 * {
      margin: 0;
      padding: 0;
   } 

以上代码会将所有HTML元素的外边距(margin)和内边距(padding)都设置为0。

如果你不想重设所有元素的边距，你可以手动设置每个元素的边距为0。

 .box1, .box2 {
      margin: 0;
      padding: 0;
   } 

使用以上方法，无论哪种方式，都可以解决div之间产生的不必要间隙问题。