为什么我在两个单独的行中放置的两个 <div> 之间有意外的空 space？

Question

.text-overflow{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  width: 30%;
  height: 150px;
  max-height: 150px;
  background-color: white;
  border: 1px solid black;
}
.sub1{
  box-sizing: border-box;
  width: 100%;
  height: 50%;
  background-color: rgba(165, 90, 90, 0.4);
}
.sub2{
  box-sizing: border-box;
  width: 100%;
  height: 50%;
  background-color: rgba(91, 96, 163, 0.4);
}

<section>
    <div class="text-overflow">
        <div class="sub1"></div>
        <div class="sub2">
            <p></p>
        </div>
    </div>
</section>

大家可以看到下面有一些不知道从哪里来的白色space？！

有人能帮我解决这个问题吗？

Answer 1

尝试将此添加到您的 CSS:

 * { 
         margin: 0px;
         padding: 0px;
         box-sizing: border-box;
 }

Answer 2

p {
  margin: 0;
}

这会起作用:) 但老实说，我不确定为什么会发生这种情况。

为什么我在两个单独的行中放置的两个 <div> 之间有意外的空 space？

Why do I have unexpected empty space between two <div>s placed in two separate line?

html

css

overflow