FM in heart

今天花了些時間弄行距

原先的版型在 article-content p 設了 margin-bottem

這會使第一行跟第二行之間出現距離

但是這只會影響在編輯時按 enter 的斷行 (手動斷行如下)

手動換行測試中

手動換行測試中

手動換行測試中

如果是一直打字沒按 enter 斷行

整段文字是因為版型寬度而分行的話

則不會有影響的 (不換行如下)

不換行測試中不換行測試中不換行測試中不換行測試中不換行測試中不換行測試中不換行測試中不換行測試中不換行測試中不換行測試中不換行測試中不換行測試中 ...

如果要讓所有換行的文字都有距離的話 (不論是手動還是寬度)

那麼你可以在 article-content 裡加上 line-height

如果同時設定 article-content 與 article-content p 會讓你很混亂的話

那你可以先設 article-content 裡的 line-height

先確定你每一段文字的距離

再來設定 article-content p = 手動換行的距離

慢慢試就可以試出自己想要的文字距離哦！

至於距離的單位嘛~

有分 pt、px、em、% 及 rem (這個第一次看到)

至於要用那一個

這個目前沒有研究

僅大約看了一下網路上的分享介紹

重點大概是：

● rem 是 css3新增，google chrome 瀏覽器有支援 。

● em 與 % 有繼承關係，所以在使用上會有影響。這裡有網友分享的測試結果 CSS 字型大小...   / 網站設計研究室

● 當初會捨棄用 px 是因為部分瀏覽不支援，即無法在瀏覽器自由變大變小。不過現在瀏覽器的版本應該是沒有這個問題了。

結論：還是依個人習慣及喜好啦！

參考資料：

● CSS 的 font-size，em 和 px？   / bbs  akiratw (akira)

● 網頁設計該用哪種字級單位：px、em 或rem？   / Jas Chyo

想要更仔細了解的話

可以自行搜尋哦！

先前因為在設計Blgo風格時

上網東找找西找找

看到有格友分享一篇關於 Blog字體大小及行距的問題

覺得寫的不錯

適度的文字大小與行距

確實可以讓人更舒服的閱讀

不過像我這樣半桶水的人用起來還是要花一些時間 (汗)

有興趣動手試試吧 :)