Почему этот 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; 
} 

Класс .Строка добавляет пространство между линией и содержания под ним. Я не знаю, почему. Что я могу сделать, чтобы исправить это?

Answer 1

margin: 30px auto; вычисляет

margin: 30px auto 30px auto; 

То есть, 30px сверху и 30px снизу. Следовательно, расстояние.

Если вы не хотите, пространство, вы можете сделать

margin: 30px auto 0; 

Или

margin: 30px auto 0 auto;