[分享]css两个盒子水平的间距

在网页设计中，经常需要将两个盒子水平排列并且设置间距。CSS提供一些简便的方法可以轻松实现这一目的。//HTML代码 //CSS代码 .box1 { width: 100px; height: 1...

在网页设计中，经常需要将两个盒子水平排列并且设置间距。CSS提供一些简便的方法可以轻松实现这一目的。

//HTML代码
<div class="box1"></div>
<div class="box2"></div>

//CSS代码
.box1 {
   width: 100px;
   height: 100px;
   background-color: red;
   display: inline-block;
   margin-right: 10px;
}

.box2 {
   width: 100px;
   height: 100px;
   background-color: blue;
   display: inline-block;
} 

这里，我们创建了两个div盒子，并添加了.box1和.box2两个CSS类。其中，我们将display属性设置为inline-block，表示将两个盒子水平排列。并且通过margin-right属性，设置了两个盒子间距为10px。

通过这种方式，我们可以轻松地为网页设计添加两个盒子并水平排列。如果需要更多的盒子，只需要复制以上代码并调整对应的CSS属性即可。