課程
/前端開發
/HTML/CSS
/CSS深入理解之line-height
行高足夠小,基線位置上移怎么理解?
2017-01-11
源自:CSS深入理解之line-height 5-1
正在回答
這個問題問得非常好,其實,老師講得有問題,基線的位置是不會動的。它的過程是這樣的:行高開始比內容區域高,此時行間距大于0,隨著行間距不斷減少,減少到0,行高和內容區域一樣高,這個時候還有空隙,這個空隙是什么呢?這個空隙是descender,就是基線到底線之間的距離。我們讓行間距繼續減少為負數,該負數的值正好等于descender,
此時,行框盒子底部上移,行框盒子底部和文字基線重合,descender部分溢出行框盒子
可以再看一下頭2節理解下內容區、基線、行間距
行高減小,會先減少行間距,當行間距減小到0時,就只剩內容區(內容區有頂線、中線、基線和底線4條,類似英文簿那4條線),這時候繼續減小行高,會壓扁內容區(本章后面那個例子中文字白色背景部分),基線也就會往中間壓縮,最后內容區成一條線消失。由于基線偏下,所以說是上移。
line-height定義了該元素中基線之間的最小距離而不是最大距離。
行高=0,基線之間距離=0,基線上移了,基線到bottom距離=0,所以沒有空白了。
這是我的理解,不知道對不對。
舉報
帶領大家深入理解line-height的定義,還有實際應用經驗分享
4 回答基線是行高中線?
2 回答內聯元素的高度是由行高決定的&&高度的表現不是行高 是否矛盾? 為什么line-height是由文本間的基線來計算的,但是單行文本卻有line-height
1 回答關于基線的配圖
1 回答行間距怎么設置
1 回答沒有設置 height 的 p 標簽的高度是由各行的行高加起來的嗎?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2024-05-09
這個問題問得非常好,其實,老師講得有問題,基線的位置是不會動的。它的過程是這樣的:行高開始比內容區域高,此時行間距大于0,隨著行間距不斷減少,減少到0,行高和內容區域一樣高,這個時候還有空隙,這個空隙是什么呢?這個空隙是descender,就是基線到底線之間的距離。我們讓行間距繼續減少為負數,該負數的值正好等于descender,
此時,行框盒子底部上移,行框盒子底部和文字基線重合,descender部分溢出行框盒子
2018-04-29
可以再看一下頭2節理解下內容區、基線、行間距
行高減小,會先減少行間距,當行間距減小到0時,就只剩內容區(內容區有頂線、中線、基線和底線4條,類似英文簿那4條線),這時候繼續減小行高,會壓扁內容區(本章后面那個例子中文字白色背景部分),基線也就會往中間壓縮,最后內容區成一條線消失。由于基線偏下,所以說是上移。
2017-01-12
line-height定義了該元素中基線之間的最小距離而不是最大距離。
行高=0,基線之間距離=0,基線上移了,基線到bottom距離=0,所以沒有空白了。
這是我的理解,不知道對不對。