首頁猿問 line-height 的一個簡單問題

line-height 的一個簡單問題

JavaScript

aluckdog 2018-12-19 15:24:10

在寫HTML和CSS的過程中，發(fā)現(xiàn)對line-height有些不明白。HTML代碼：<div class="p"> <span class="c">Color</span> </div>CSS代碼：*{ margin:0; padding:0 }.c{ color:white; font-size:20px; line-height:40px; background:orange; display:block }效果圖：代碼都十分及其非常簡單，span標(biāo)簽的高度是40px，但是我想問的是，假如將上面display:block這一行注釋掉，這時候span標(biāo)簽的高度為auto，是22px，而div的高度卻變成了40px，并且背景顏色的范圍只包括span標(biāo)簽問題：為什么假如沒有display:block這一句，光憑line-height為40px并沒有將span標(biāo)簽的高度撐開？卻把div的高度撐開到40px了？鏈接：鏈接

查看完整描述

1 回答

三國紛爭

TA貢獻1804條經(jīng)驗獲得超7個贊

span元素是行內(nèi)元素，當(dāng)你把display:block去掉的時候，span的display屬性就變成了inline,inline屬性的元素是無法設(shè)置寬高的，由元素內(nèi)容決定的，但是line-height可以用來設(shè)置行內(nèi)元素的高度，因此div會被撐到40px
line-height CSS 屬性用于設(shè)置多行元素的空間量，比如文本。對于塊級元素，它指定元素行盒（line boxes）的最小高度。對于非替代的inline元素，它用于計算行盒（line box）的高度。

反對回復(fù) 2018-12-19