<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html {
font-size: 100px;
}
span {
font-size: 12px;
line-height: 12;
}
</style>
</head>
<body>
<p>
<span>dsflfij</span>
</p>
</body>
</html>p的高度变得很高
黄舟2017-04-17 14:53:02
你的 span 的 line-height 值設定的是 12。
依照規定，當行高設為數字時，行高的計算值就是自身字體大小的相應倍數，具體到你的問題中就是12x12=144，這樣的話p 的高度就應該是144px(不算邊框) 才對，但我們透過審查元素工具可以看到p 的最終高度是161px(不算邊框)。
這其實牽涉到行框高度的計算。 p 的高度就是其內部行框的高度，而行框的高度是行框內最高點和最低點之間的距離（The line box height is the distance between the uppermost box top and the lowermost box bottom）。我們來看下面的demo。為了方便觀察把 span 元素變成行塊元素（有高度），背景顏色設為淡灰色，並且在 span 後面放一個字母 x ，x 底邊所在的線就可以看做是 span 所在行框的基線。
http://codepen.io/zengkan0703...
當我們把span 的vertical-align 值設為middle，如box2 ，可以看到行框的最高點和最低點都是span 元素的最高點和最低點，p 的最終高度就是理想的144px。 當span 的vertical-align 值為預設的baseline 時，如box1， 為了跟行框的基線對齊，span 元素會下移，行框的最高點變成了匿名行內框x 的最高點，最低點還是span的最低點，所以行框的高度就會變大為161px。
怪我咯2017-04-17 14:53:02
css 中 line-height 的問題
line-height 一個很重要的用途就是讓我們的文字可以在父級元素中垂直居中，但是在使用它的過程中也會遇到一些問題。
先來看一個實例，如下圖：
程式碼也很簡單，就是當我們在p 中定義的字體很大的情況下，我們看到字體和父級元素之間有一些空隙。那麼這是為什麼？
我們來檢查 line-height 的定義，如下：
normal 預設。設定合理的行間距。
number 設定數字，此數字會與目前的字型尺寸相乘來設定行間距。
length 設定固定的行間距。
% 是基於目前字體尺寸的百分比行間距。
inherit 規定應該從父元素繼承 line-height 屬性的值。
所以在以上的情況我們要想使，我們的字體能夠撐滿我們的容器，就需要為父級容器添加 line-height屬性且值為 100%
程式碼和效果如下：
那為什麼會出現上面的問題呢？
line-height 與 font-size 的計算值之差(行距)分為兩半，分別加到一個文字行內容的頂部和底部。
所以，可以得到下面的一個公式：
空白間距 = line-height – font-size
所以，當設定為line-height 的值為100%的時候，line-height的值就等於 font-size的尺寸，此時的空白間距為0。
大家讲道理2017-04-17 14:53:02
來, 走幾步.
第一步, 屬性的繼承. p 沒有自己定義的 font-size 和 line-height, 因此繼承於 HTML, 得到 p 具有如下計算值:
font-size: 100px;
line-height: normal;
第二步, 了解行高. 基於以上的計算值, 假設用戶代理(即瀏覽器)採用的line-height 使用值為1.15, 那麼實際上p 的行高是115px . 而所謂行高, 即是行盒的最小高度.
第三步, 了解行盒. 概念比較複雜, 詳情請看我最後的鏈接. 行盒的高度是最上行內盒頂部到最下行內盒的底部(其中還有vertical-align 的因素, 這裡不表)並包含這個最小高度(這個最小高度是透過虛擬"支柱"實現的, 不表), 在你的程式碼裡, p 只有一個行盒, 這個行盒又只有一個行內盒SPAN , 而這個行內盒的行高是12px * 12, 大於最小高度115px, 故此行盒實際高度144px.
第四步, p 取其頂部到其最後一個行盒(本例中只有一個)的高度, 即 144px.
所以, 當你增加HTML 的font-size 時, 導致p 的行高使用值也在跟著變化, 一旦這個值超過SPAN 的高度, 就會成為p 的高度.
詳細原理請參考: https://segmentfault.com/a/11...
PHPz2017-04-17 14:53:02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html {
font-size: 100px;
}
span {
font-size: 12px;
line-height: 12;
}
</style>
</head>
<body>
<p>
<span>dsflfij</span>1
</p>
</body>
</html>因為font-size可繼承，你這樣寫了後p的font-size也變大了。
並且需要注意的一點line-height裡面 12 ！ = 12px,詳情百度一下差異
阿神2017-04-17 14:53:02
font-size是可繼承的屬性，你這樣寫之後p就繼承了html 的font-size：100px的屬性，所以p的font-size也變大了，由於你設定了span的font-size ，所以就感覺p變得很高。