[分享]css两个div间隙为0

CSS是网页设计中最重要的技术之一，它可以控制网页的布局、样式和交互效果。其中有一种常见的需求是让两个相邻的div元素间隙为0，这样可以使网页更紧凑，更美观。 .box{ margin: 0; pad...

CSS是网页设计中最重要的技术之一，它可以控制网页的布局、样式和交互效果。其中有一种常见的需求是让两个相邻的div元素间隙为0，这样可以使网页更紧凑，更美观。

<style>
  .box{
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
      display: inline-block;
      width: 50%;
      height: 100px;
      background-color: #ccc;
  }
  .box1{
      float: left;
  }
  .box2{
      float: right;
  }
  .clearfix:after{
      content:"";
      display:block;
      clear:both;
  }
</style>

<div class="clearfix">
  <div class="box box1"></div>
  <div class="box box2"></div>
</div> 

上述代码中，我们首先定义了两个相邻的div元素，分别为class为box1和box2的元素。然后使用了clear:both清除了两个div之间的浮动影响，从而使它们之间的间隙为0。同时，我们还添加了clearfix类，用于清除浮动后的影响，保证元素正确地排列。

除此之外，我们还将box元素定义为inline-block，以便它们能够在同一行展示。同时，我们将两个元素的宽度都定义为50%，这样可以使它们大小一致，更加协调。

总之，通过这种方式，我们可以轻松实现两个div元素之间的间隙为0，从而使网页更加美观、紧凑。CSS的强大即在于它可以通过简单而灵活的样式规则实现各种各样的布局效果，让网页设计更加出色、易用。