html - 为什么这个 div 在底部添加空白区域？

Question

我有以下代码:

<div class="line">
<div class="content">Hello, How are you?</div>

CSS:

 .line {
 border-bottom: 1px solid tomato;
 margin: 30px auto;
 width: 852px;
 overflow: hidden;
 }

 .content {
 color: #000;
 font-size: 15;
 }

.line 类在行和它下面的内容之间添加空间。我不确定为什么。我该怎么做才能解决这个问题？

Answer 1

margin: 30px auto; 计算为

margin: 30px auto 30px auto;

即 30px 位于顶部，30px 位于底部。因此间距。

如果你不想要空间，你可以这样做

margin: 30px auto 0;

或者

margin: 30px auto 0 auto;