div css文字字體行高行距 深入理解css行間距設置


div css文字字體行高行距 DIVCSS5帶您深入理解css行間距設置,字體行距如何最簡單地設置。

在文章中,要實現調節設置每行文字字體間距(行距)是使用line-height屬性。

要使得每行的文字一定的間距距離所以可以通過line-height樣式實現。接下來DIVCSS5通過DIV CSS實例實現字體文字上下間距。

為了觀察到行距設置效果,新建兩個div盒子對象,分別div命名為“.divcss5-a”和“.divcss5-b”。

1、div+css實例完整HTML代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>石家庄服裝設計</title>
<style>
.jm880-a{ line-height:22px}/* css 注釋說明:設置行距行高22px */
.jm880-b{ line-height:40px}/* 設置行距行高22px */
</style>
</head>
<body>
<div class="jm880-a">
我被設置行高22px<br />
我行距為22培訓<br />
jm880占位內容
</div>
<div class="jm880-b">
我被設置行高40px<br />
我行距為40培訓<br />
jm880占位內容
</div>
</body>
</html>

設置了兩個盒子分別css行高間隔設置為22px和40px,大家可以復制以上代碼進行實踐觀察效果掌握css設置對象內字體文字上下行間距。掌握設置行間距行高代碼是什么。
2、總結
要實現上下換行文字行間距行高樣式其實我們只用對文字所在對象設置line-height樣式即可,一般行距值設置大於14px以上即可,根據css字體大小,css行高值不能小於字體值,不然行距設置值比字體大小值小后字體會重疊一部分,形成不兼容效果。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM