css調(diào)整行間距的方法:可以利用line-height屬性來調(diào)整行間距,如【p.big {line-height:200%;}】,表示將行間距調(diào)整為基于當(dāng)前字體尺寸的百分之兩百。
本文操作環(huán)境:windows10系統(tǒng)、css 3、thinkpad t480電腦。
在css中,如果我們需要調(diào)整文字之間的行距,可以使用line-height屬性,該屬性可以設(shè)置以百分比計(jì)的行高。
注意:負(fù)值是不允許的。
屬性值:
-
normal 默認(rèn)。設(shè)置合理的行間距。
-
number 設(shè)置數(shù)字,此數(shù)字會(huì)與當(dāng)前的字體尺寸相乘來設(shè)置行間距。
-
length 設(shè)置固定的行間距。
-
% 基于當(dāng)前字體尺寸的百分比行間距。
-
inherit 規(guī)定應(yīng)該從父元素繼承 line-height 屬性的值。
代碼示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> <style> p.small {line-height:70%;} p.big {line-height:200%;} </style> </head> <body> <p> 這是一個(gè)標(biāo)準(zhǔn)行高的段落。<br> 這是一個(gè)標(biāo)準(zhǔn)行高的段落。<br> 大多數(shù)瀏覽器的默認(rèn)行高約為110%至120%。<br> </p> <p class="small"> 這是一個(gè)更小行高的段落。<br> 這是一個(gè)更小行高的段落。<br> 這是一個(gè)更小行高的段落。<br> 這是一個(gè)更小行高的段落。<br> </p> <p class="big"> 這是一個(gè)更大行高的段落。<br> 這是一個(gè)更大行高的段落。<br> 這是一個(gè)更大行高的段落。<br> 這是一個(gè)更大行高的段落。<br> </p> </body> </html>
(學(xué)習(xí)視頻分享:css視頻教程)
運(yùn)行結(jié)果: