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

我有以下代码：

<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类在行与其下方的内容之间添加了空间。我不知道为什么。我该怎么做才能解决此问题？

最佳答案

margin: 30px auto;计算为

margin: 30px auto 30px auto;

也就是说，30px在顶部，30px在底部。因此间隔。

如果您不想要空间，可以做

margin: 30px auto 0;

要么

margin: 30px auto 0 auto;

关于html - 为什么这个div在底部添加空白空间？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16596843/