css两个div都是空白

最近，我在学习 CSS 的时候，遇到了一个有趣的问题：两个空白的 div 不一样大，这是怎么回事呢？

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

我们先来看一下 CSS：

 .box1 {
    background-color: red;
  }
  .box2 {
    background-color: blue;
  } 

接下来，我们在浏览器中预览一下这段代码，会发现 box1 的大小和 box2 不同。这是因为，虽然两个 div 都是空白的，但它们的高度并不相同。这是因为我们没有设置 div 的高度和宽度，所以它们的高度和宽度默认是等于 0 的。

如果我们想要两个 div 的大小相同，就需要给它们设置相同的高度和宽度：

 .box1, .box2 {
    height: 100px;
    width: 100px;
  } 

这样，两个 div 的大小就相同了。

除了设置高度和宽度之外，我们还可以将两个 div 盒子的 display 属性都设置为 inline-block，这样它们的大小也会相同：

 .box1, .box2 {
    display: inline-block;
  } 

现在，我们来总结一下这个问题的解决方案：

• 设置相同的高度和宽度
• 将盒子的 display 属性设置为 inline-block

这样，我们就可以解决两个空白的 div 不一样大的问题了。在实际项目中，我们需要注意设置元素的高度和宽度，以免导致元素大小不一致的问题。