我有一個(gè)具有特定行高的塊,我在其中插入帶有 ::before
偽元素的內(nèi)容。
.block::before { content:'text here'; }
這個(gè)效果很好。但是,如果我也給內(nèi)容設(shè)置較小的字體大小
.block::before { font-size:.6em; content:'text here'; }
方塊實(shí)際上變得更高了。這是為什么?
.container { display:inline-block; } .lorem, .ipsum, .dolor, .sit { line-height:3em; border:1px solid green } .ipsum:before { content:'world!'; } .sit:before { font-size:.6em; content:'world!'; }
<div class="container"> <div class="lorem">Hello</div> </div> <div class="container"> <div class="ipsum"></div> </div> <hr style="clear:both"/> <div class="container"> <div class="dolor">Hello</div> </div> <div class="container"> <div class="sit"></div> </div>
頂行沒有字體大小更改,底行有。
現(xiàn)在我發(fā)現(xiàn)一個(gè)可能的解決辦法就是將偽元素的line-height
設(shè)置為0
。或者到1em
?;蛘呱踔恋?normal
。那么發(fā)生了什么?通過將字體大小設(shè)置為 .6em
是否將 line-height
設(shè)置為一些奇怪的值?為什么?
line-height:normal
可以解決問題。一定發(fā)生了一些事情,隱式地將行高設(shè)置為更大的值。這就是我想要找出的答案。編輯:這個(gè)問題最近引起了很多新的關(guān)注,因此這里進(jìn)行了更新以使其更有用。
Alohci 的解決方案是正確的,但對于更傾向于圖形化的人來說可能不是絕對清楚。
所以請?jiān)试S我用圖片來澄清一下解決方案。
首先,line-height 繼承為其計(jì)算的大小,因此雖然它是以 em
單位指定的,但子級將繼承以像素為單位的值。例如,如果字體大小為 20px
且行高為 3em
,則行高將為 60 像素,即使對于具有不同字體大小的后代(除非他們指定其自己的行高)。
現(xiàn)在我們假設(shè)字體帶有 1/4 下降部。也就是說,如果您有 20px 字體,則下降部分為 5 像素,上升部分為 15 像素。然后將剩余的行高(在本例中為 40 像素)在基線上方和下方均分,如下所示。
對于較小字體(0.6em 或 12 像素)的塊,行高的剩余量為 60-12 或 48 像素,它也被平均劃分:基線上方 24 個(gè),基線下方 24 個(gè)。
然后,如果我們將兩種字體組合在同一基線上,您將看到行高沒有以相同的方式劃分,因此包含塊的總高度會增加,即使兩個(gè)行高都是 60 像素。
希望這能解釋一切!
.lorem、.ipsum、.dolor 和 .sit 框的高度都是它們包含的單行框的高度。
每個(gè)行框的高度是該行的支柱和該行中的文本的基線之上的高度+基線之下的最大高度的最大值。因?yàn)橹е臀谋驹诨€上對齊。
為了清楚起見,下面的高度(以em為單位)是指整個(gè)容器(即body元素)的字體大小
在 .ipsum 中(字體大小為 1em),支柱和文本的基線以上高度為 1em(上半部領(lǐng)先)+ 13/16em(上升部分,大約),高度基線以下是 1em(半行前)+ 3/16em(下降部分,大約)+ 1em(下半行前),總共 3em。
在.sit(字體大小為0.6em)中,基線以上的高度是[1em(上半部前導(dǎo))+ 13/16em(上升部分,大約)支柱]和[1.2]中的最大值em(上半部分領(lǐng)先)+ 0.6 x 13/16em(上升部分,大約)],基線以下的高度是[1em(下半部分領(lǐng)先)+ 3/16em(上升部分)中的最大值下降部分,大約)用于支柱]和[1.2em(下半部前導(dǎo))+ 0.6 x 3/16em(下降部分,大約)用于文本]。
對其進(jìn)行評估并轉(zhuǎn)換為小數(shù),得出基線以上 1.8125em,基線以下 1.3125em,總計(jì) 3.125em,大于 .ipsum 的 3em。
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://www.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號