为什么这个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;