div css文字字體行高行距 DIVCSS5帶您深入理解css行間距設置,字體行距如何最簡單地設置。
在文章中,要實現調節設置每行文字字體間距(行距)是使用line-height屬性。
要使得每行的文字一定的間距距離所以可以通過line-height樣式實現。接下來DIVCSS5通過DIV CSS實例實現字體文字上下間距。
相關擴展CSS教程:
css line-height
div css字間距
為了觀察到行距設置效果,新建兩個div盒子對象,分別div命名為“.divcss5-a”和“.divcss5-b”。
1、div+css實例完整HTML代碼:
- <!DOCTYPEhtml>
- <html>
- <head>
- <metacharset="utf-8"/>
- <title>divcss5css行間距實例</title>
- <style>
- .divcss5-a{line-height:22px}/*css 注釋說明:設置行距行高22px*/
- .divcss5-b{line-height:40px}/*設置行距行高22px*/
- </style>
- </head>
- <body>
- <divclass="divcss5-a">
- 我被設置行高22px<br/>
- 我行距為22培訓<br/>
- DIVCSS5占位內容
- </div>
- <divclass="divcss5-b">
- 我被設置行高40px<br/>
- 我行距為40培訓<br/>
- DIVCSS5占位內容
- </div>
- </body>
- </html>
設置了兩個盒子分別css行高間隔設置為22px和40px,大家可以復制以上代碼進行實踐觀察效果掌握css設置對象內字體文字上下行間距。掌握設置行間距行高代碼是什么。
2、css div行高行間距效果截圖
字體上下行間距css+div實例截圖
3、總結
要實現上下換行文字行間距行高樣式其實我們只用對文字所在對象設置line-height樣式即可,一般行距值設置大于14px以上即可,根據css字體大小,css行高值不能小于字體值,不然行距設置值比字體大小值小后字體會重疊一部分,形成不兼容效果。
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。
新聞熱點
疑難解答