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;