（1-1）line-height的定義和與行內框盒子模型的關系

一、line-height的定義

line-height的定義： 行高，又稱為兩基線的距離。默認基線對齊（因為CSS所有*線：總之就是各種定義的線都是和基線對齊的）

默認X對齊。

下面貼出一個超大超大的大圖：?

? ?

?

注意！！不同字體下的基線位置會稍微有點變化，可能會有上浮或者下沉噢。

基線，和行高的一些作用和表現機理 兩基線的距離即為行高

?

二、line-height和行內框盒子模型

所有內聯元素的樣式表現都和行內框盒子模型有關

?

?

?

?1、

2、

3、

4、

那么我們了解行內框盒子模型，對我們了解行高有什么作用呢？有些人可能有這些疑問，

來，看這里

?

為什么P元素有高度哪來的呢，是font-size嗎？？ no、no、no實際上是由行高確定的

?

?

?

　　有些人有這個疑問。line-height明明是兩基線的距離，單行文字哪來的行高，還控制了高度？？

　　行高有繼承性，即使是單行文本也是有行高的。而且實際上控制高度的不是line-height（line-height 就是行高），而是幕后黑手。內容區域和行間距；

不過~~~~ 行高等于內容高度 上下半間距；

1、內容區域高度只和字號以及字體有關，和line-height沒有半點關系。

2、網上有的說字體大小就是內容區域高度這個是不對的，只有在simsum 字體下，才完全相等。

?

?

　　那為什么font-size不一定等于內容區域高度，那么為什么行高行高還等于font-size 上下半間距呢？？ ?因為上下半間距是可以為負值跟隨行高和內容高度變化的

?

那么單行行內框盒子是不是為內聯最高行高決定呢？ 答案是不一定的，會受到其他的（例如vertical-align）干擾，

?

多行行內框盒子當然就是每個單行行內框盒子的總和了

?

---------------------------------------------------------分割線---------------------------------------------------

?

小編碼字找圖不易，希望小編的分享能對大家有所啟發。大家有不同的意見或建議可以在下面的留言區跟我交流。覺得好可以關注，后續還有繼續推文噢~　

?

? ? ? ?　　贊賞小編一個跳跳糖~~~

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的（1-1）line-height的定义和行内框盒子模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。