Обивка для вертикального ритма

Question

У меня есть очень фундаментальный вопрос, чтобы выбрать размер отступа для вертикального ритма.

Скажем так:

.body{
    font-size: 14px;
    line-height: 18px;
}

И у нас есть div с содержимым (div имеет границу):

<div class="content">
     ... a very large text content here ...
</div>

Какой из следующих вариантов будет правильным для вертикального выравнивания, этот:

.content{ padding: 18px; .... }

или я должен рассмотреть разницу (18-14)/2 = 2px, так:

.content{ padding: 16px 18px 16px 18px;  .... }

или, если оба ответа неверны, объясните, пожалуйста, как подойти к этому вопросу.

Answer 1

Вы должны установить одинаковые отступы сверху и снизу контейнера. пример:

.content {
padding: 10px 0;
line-height: 14px;
}
<div class="content">
 ...some text here...
</div>

Также вы можете установить высоту div и затем установить ту же высоту строки