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電腦。
屬性簡介:
line-height屬性用來設(shè)置以百分比計的行高。
屬性值:
-
normal 默認(rèn)。設(shè)置合理的行間距。
-
number 設(shè)置數(shù)字,此數(shù)字會與當(dāng)前的字體尺寸相乘來設(shè)置行間距。
-
length 設(shè)置固定的行間距。
-
% 基于當(dāng)前字體尺寸的百分比行間距。
-
inherit 規(guī)定應(yīng)該從父元素繼承 line-height 屬性的值。
舉例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)</title> <style> p.small {line-height:70%;} p.big {line-height:200%;} </style> </head> <body> <p> 這是一個標(biāo)準(zhǔn)行高的段落。<br> 這是一個標(biāo)準(zhǔn)行高的段落。<br> 大多數(shù)瀏覽器的默認(rèn)行高約為110%至120%。<br> </p> <p class="small"> 這是一個更小行高的段落。<br> 這是一個更小行高的段落。<br> 這是一個更小行高的段落。<br> 這是一個更小行高的段落。<br> </p> <p class="big"> 這是一個更大行高的段落。<br> 這是一個更大行高的段落。<br> 這是一個更大行高的段落。<br> 這是一個更大行高的段落。<br> </p> </body> </html>
運行結(jié)果: