CSS设计垂直间距优化文字界面

网络整理 - 07-27

垂直间距的设置是文字布局的关键,也是比较复杂的地方,我们需要通过计算来实现精确布局,达到一种和谐的美,下面我将具体展示如何使用CSS设置垂直间距达到精确定位文字布局的目的。

首先我们需要一个拥有基准线的文档,这样就可以衡量我们的字里行间是否真正精确无误,在这里我设置了 24px 的行距以便测试。

拥有基准线的文档

首先你需要取消所有的浏览器默认样式。

*{
margin : 0;
padding : 0;
}

然后设置你希望的文档的具体内容的一般性字体大小,我这里采用 13px 。

body{
font-size : 0.8125em;
}

为了使我的 13px 的字体嵌入到 24px 的行距中,我应该如何做呢?是的,设置 line-height 。

p{
line-height : 1.846em;
}

我希望在每个段落之后能够有一定的空白,使我的每个段落能够更加清晰,所以我应当设置 margin-bottom ,它必须是 1.846em 的整数倍,才能使后一段落仍然嵌在 24px 的行距中。

p{
line-height : 1.846em;
margin-bottom : 1.846em;
}

注意,整体段落的整齐划一是最重要的,其他如标题,分割线之类应当穿插在其中,所以设置标题等元素时需要进行一番计算。首先你需要确定你想要的标题的字体大小和行高,因为它们将决定你的文字看起来有多大相隔多少,但是注意应当使你的插入的元素的行高均以 24px 为基准,设置以它为整数倍的值为插入元素的行高。如 h1 大小我选择 1.6em ,行高就需要 1.154em , h2 大小选择 1.4em ,行高就需要 1.319em 。如果我需要在 h2 与段落之间有比段落之间更大的宽度,我希望 margin-top 在 2em ,那么计算得到的 margin-bottom 就应当是 0.667em ,以使它们相加后能够成为 24px 的倍数。所以我将在 h1 和 h2 中应用以下样式:

h1{
font-size : 1.6em;
line-height : 1.154em;
margin : 1.5em 0 0.808em 0;
}

h2{
font-size : 1.4em;
line-height : 1.319em;
margin : 2em 0 0.667em 0;
}

最后,我们就能够看到一个嵌入的恰到好处的文章内容了。

良好的文档行距