準備工作

去年的時候,青云發表過 關于柵格系統的文章  . 我們知道網頁的柵格系統是運用固定的格子設計版面布局,使其風格工整簡潔. 視覺上來說,柵格系統能夠將大塊區域分割成小區域,清楚地展示頁面的布局,并能夠引導視覺線在各個板塊之間掃描、閱讀. 從信息上來說,柵格系統讓信息的呈現方式更加直觀,從而有效提高易讀性.
 但是大部分柵格系統是在水平方向上的布局,其實,我們的垂直方向也是有柵格系統的——也就是我們的“垂直韻律”.

垂直韻律的就像好比我們手上拿著的線格本子，有著一行行的網格線，安排著垂直方向上的文字排版。“排版中的空間就像是音樂里的節拍. ”音樂的節拍雖然有許多變化,但是幾乎每首歌都會有一個固定的節拍來掌握整個歌曲的節奏. 這就是為什么柵格系統一般用固定寬度的網格陣列來指導和規范網頁中的版面布局以及信息分布.
其實，那么,在網頁里,垂直韻律應由三個因素控制：

• 字體大小(font-size)
• 行距(line-height)
  具體定義可以參照我的《字體、排版簡明入門》 中行距這一節
• 間距(margin,padding)
  認真考量這三個因素的值,才能實現垂直韻律.

開工

基礎行距

在垂直韻律中,基本的單位是行距. 在整個頁面上設定一個合適的行距是垂直韻律之所以能夠成為韻律的必要條件. 這個行距,我們將應用于整個頁面的所有文字上,包括正文、標題、側邊欄等. 例如,我們現在設定我們的字體大小(css font-size)為12px,行距(css line-height)為18px. (對于中文宋體來說,12px是能夠清晰顯示的最小字號. 為了保證可讀性,12px的1.5倍行距就是18px. 同時12px/18px也是中文互聯網上最常用的字號和行距. )我們在空白頁面的垂直方向上以18px為單位做垂直網格,就像我們線格本子上的線條,每條網格線也就是基線的對齊線. 接著，我們放上三個段落(12px/18px)作為例子講解.

(demo-1.html)

段落間距

段落間加上段間距不但美觀,而且容易在視覺上區別各段落. 但是要注意的是,垂直韻律最容易被打破的地方就是兩個元素在垂直方向上的空白了. 所以,為了讓下一段的文字內容落在網格內,我們要將段落間距設置為基礎的倍數. 例如：我們可以設置段前距為9px,段后距為9px,9px+9px=18px；或者設置段前距(css margin-top)為0,段后距(css margin-bottom)為18px；或者段前距和段后距都是18px. 這里,我們選取第二種方案,即,設置段前距為0,段后距為18px. 圖中可以看到,每段段落的文字都落在了格子內. 關閉網格可以發現,段落清晰明了,比之前容易閱讀多了.

(demo-2.html)

添加標題

使用瀏覽器默認的樣式,你會發現,大多數情況下,垂直韻律都被打破了. 所以,添加標題,我們需要選擇正確的行距和間距才可以.

有了添加段間距的經驗,相信添加標題也不是一件難事了. 標題的文字要比正文的文字要大的多. 例如,我們現在選擇h1的字體大小為24px.
那么,根據附錄結論有：

• 行距和全部垂直間距之和為基礎行距的倍數。

那么，我們假設行距為36px,則可以設置段前距為9px，段后距為9px (驗證有：36 + 9 + 9 = 54 = 3 * 18).
 同樣，我們也可以設置h2:字體大小18px，行高24px，段前距3px，段后距9px(驗證有：24 + 3 + 9 = 36 = 2 * 18)。

(demo-3.html)

添加邊注

網站我們常常有側邊欄，我們這里就用右邊的邊注來代表。在這里的例子中，我們和正文一樣設定邊注的排版：字體12px，行距18px。正是由于我們 前面的努力，我們可以看到，邊注的基線和正文的基線是對齊的。關閉網格可以看到，由于基線的對齊，整個排版有條不紊，十分美觀。

(demo-4.html)

添加邊框

添加邊框道理相同，無非要的就是最后要求基線與網格對齊。這里的例子中，我們來給邊注加個邊框吧。給他加上1px邊框(css border)后，還要再加上8px的補白(css padding).細心的同學們一定發現了，為什么補白是8px呢？其實很簡單，這就是保證垂直方向上的補白和邊框之和，是我們的基礎行高18px的倍 數：垂直方向上兩個補白兩個邊框，那么1 + 8 + 8 + 1 = 18.

加上去后，我們發現，恩？怎么沒有右邊文字沒有對齊到網格上呢？原來加上了補白和邊框后，邊注下移了9px，所以網格就沒有對齊啦。那么，我們就要把邊注上移9px?，F在，我們可以看到右邊的文字已經對齊到網格。是不是感覺不錯？

(demo-5.html)