網頁設計中,文本是不可缺少的元素之一。而 css 文本行距(line-height)則是控制文本行間距的重要屬性。
什么是文本行距?一篇文章中,每行字的上下間距,就是文本行距。如果行距設置過小,字就會擠在一起,不美觀;如果行距過大,則會大幅降低排版的可讀性。
那么如何設置文本行距呢?首先,行距值是相對于文本字號而言的。如下代碼:
p { font-size: 16px; /*文本字號*/ line-height: 1.5; /*文本行距*/ }
上述代碼設置了一段文本的字號為 16 像素,行距為字號的 1.5 倍。如此設置的行距相對來說比較舒適,能夠確保讀者閱讀時有足夠的間隔以及呼吸空間,能夠提高文本可讀性。
若想設置具有特殊意義的文本的行距,可以使用單獨的 class 樣式進行設置,如下:
.text-padded { font-size: 16px; line-height: 2; /*行距為字號的 2 倍*/ }
然后為相應的文本,添加該 class 樣式。代碼如下:
<p class="text-padded">這段文本行距為 2 倍字號。</p>
總之,不管是哪種情況,精心設置的文本行距,可以提高排版和美觀度,更重要的是,也會提高文本的可讀性。
上一篇css text 行距
下一篇css th 文字豎