填充垂直节奏

Question

我有一个非常基本的问题来选择垂直rhytm的填充尺寸。

让我们说：

.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的高度，然后设置相同的行高