首頁猿問瀏覽器是怎么計算行內(nèi)元素高度的？

瀏覽器是怎么計算行內(nèi)元素高度的？

JavaScript

慕村225694 2019-04-10 20:49:19

imagespan{font-family:"MicrosoftYaHei","HiraginoSansGB","WenQuanYiMicroHei",sans-serif;font-size:16px;line-height:16px;}行內(nèi)元素在Chrome里，span的高度從開發(fā)者工具看是21px，而我設(shè)置的是16px的行高和字體大小。那么為什么實(shí)際高度變成了21px，多出來的5px是什么屬性造成的？外層的div實(shí)際高度從開發(fā)者工具看是18px，為什么不是21px？

查看完整描述

2 回答

慕標(biāo)琳琳

TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超9個贊

span是21px是字體的原因，font-size會給出一個基本的字體框大小，最后具體的值靠字體本身決定，字體可以小于或超出這個基本框。然后，這里顯示的span高度和自身的line-height完全無關(guān)。也許這很奇怪，或者感覺與W3C標(biāo)準(zhǔn)不一致，但開發(fā)者工具就是這樣處理的。你看到的高度是這個字體的高度，如果你給它加上豎直方向padding和border，這部分高度同樣會計入span的高度，而當(dāng)span進(jìn)入布局時，這個工具中顯示的高度顯然是沒什么意義的。那么按照標(biāo)準(zhǔn)和實(shí)際上的布局，這個span有多高？就是line-height中的16px，不論字體有多大，豎直方向的borderpadding有多高，都是16px。那么為什么外層div的高是18px,而不是16px？外面的div看似只有一個span，但請注意，它本身是有font-size和line-height值的，如果你在div以內(nèi)、span以外寫上字，這些字就得按div的font-size和line-height來排，就現(xiàn)在是空的，這個布局依然存在。你所看到的18px，就是目前div的line-height。當(dāng)然，div的高度不是簡單由自身line-height決定，只是這里正好。

反對回復(fù) 2019-04-10

慕容森

TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超18個贊

China

給外邊的塊加個邊框,然后調(diào)整font-size或者line-height參數(shù),都可以看到占用的高度在變化.

反對回復(fù) 2019-04-10

2 回答
0 關(guān)注
553 瀏覽

關(guān)注

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

瀏覽器是怎么計算行內(nèi)元素高度的？

瀏覽器是怎么計算行內(nèi)元素高度的？

2 回答

添加回答

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

瀏覽器是怎么計算行內(nèi)元素高度的？

瀏覽器是怎么計算行內(nèi)元素高度的？

2 回答

添加回答

瀏覽器是怎么計算行內(nèi)元素高度的？

瀏覽器是怎么計算行內(nèi)元素高度的？