用CSS设计垂直间距优化文字界面
在 Web 2.0中文Typography设计 一文中已经提到,垂直间距的设置是文字布局的关键,也是比较复杂的地方,我们需要通过计算来实现精确布局,达到一种和谐的美,下面我将具体展示如何使用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;}
最后,我们就能够看到一个嵌入的恰到好处的文章内容了。