CSS中行間距問題示例探討

2024-07-11 08:28:02

字體：大中小

供稿：網(wǎng)友

高度給定的元素, 其內(nèi)部單行文本垂直居中的一種實現(xiàn)方式為: 給當前定高元素, 設(shè)置line-height屬性, 其屬性值等于當前元素的height值。

今天了解到了一條相關(guān)知識, 明白這個方法的實現(xiàn)原理.

我們常說的單倍行距, 雙倍行距等等, 主觀上認為是line-height設(shè)置的值, 如果量一下實際的效果, 會發(fā)現(xiàn)兩行文本的間距, 并非等于line-height的值.

瀏覽器計算和分配行間距的方法

間距 ="line-height" – "font-size";
文本上下分配大小 = 間距/2;
字號 = 12px; line-height:3;
間距 = 3*12 – 12 = 24(px);
文本上下分配大小 = 24/2 = 12(px)

邏輯上如此無懈可擊~ o.0

小知識點(濟寧網(wǎng)站建設(shè)認為, 應該這樣)

"line-height的值, 推薦使用數(shù)字而非帶有單位的值, 如, 推薦使用line-height:2; 不推薦使用line-height:24px;" 原因在于,line-height:24px;是一個固定的值, 對于任何大小的文本, 都采用這個值來計算行間距。若文本的字號過大, 會出現(xiàn)重疊的問題. 不帶單位的值表示倍數(shù). 自然避免了該問題。

看下邊的例子

復制代碼

代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div{
font-size:30px;
font-family:Consolas,Microsoft Yahei,SimSun;
margin:10px 10px 0px 10px;
padding:10px;
}
#demo_1{
background:#EEE;
border:solid 1px #CCC;
line-height:12px;
}
#demo_2{
background:#333;
border:solid 1px #000;
line-height:2;color:#FFF;
}
</style>
<title>Line-heighg demo</title>
</head>
<body>
<div id="demo_1">
line-height:24px;

line-height:24px;
</div>
<div id="demo_2">
line-height:2;

line-height:2;
</div>
</body>
</html>

上一篇：css在各種瀏覽器中的不同寫法整理(IE與FF)

下一篇：css中display和visibility的用法和區(qū)別介紹