一個p裡面有兩個元素img span.
1。在p上設定font-size:0px
#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> relationship between height and font-size </title>
<style type="text/css">
*{
margin:0px;
border:0px;
box-sizing:border-box;
}
p{
border:1px solid black;
font-size:0px;
}
img{
border:1px solid red;
}
span{
border:1px solid blue;
}
</style>
</head>
<body>
<p>
<img src="https://i.stack.imgur.com/abMWp.jpg" alt=""><span>it is a car</span>
</p>
<script language="JavaScript">
var e1=document.getElementsByTagName("p")[0];
var e2=document.getElementsByTagName("img")[0];
alert("Target height is "+(e1.offsetHeight-e2.offsetHeight).toString());
</script>
</body>
</html>
儲存為car1.html,運行結果是0.
2。在p的兩個子元素上設定font-size:0px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> relationship between height and font-size </title>
<style type="text/css">
*{
margin:0px;
border:0px;
box-sizing:border-box;
}
p{
border:1px solid black;
}
img{
border:1px solid red;
font-size:0px;
}
span{
border:1px solid blue;
font-size:0px;
}
</style>
</head>
<body>
<p>
<img src="https://i.stack.imgur.com/abMWp.jpg" alt=""><span>it is a car</span>
</p>
<script language="JavaScript">
var e1=document.getElementsByTagName("p")[0];
var e2=document.getElementsByTagName("img")[0];
alert("Target height is "+(e1.offsetHeight-e2.offsetHeight).toString());
</script>
</body>
</html>
儲存為car2.html,運行結果是6px.
請問，如何解釋這種行為？
這是font-size對img標籤的影響。外層包圍img元素的p font-size越大，底部留白就越大。 span作為一個行內元素，高度沒有img高，可以忽略。 e1和e2相差的高度就是img和p之間的留白。 （當然你要border註解掉，p font-size:0時才能得到e1-e2等於0）。
指出一點：情況1應該為2
三個點：
3.1.p的高度是由
line-height撐起。line-height撑起。2.默认情况下，
line-height为normal(1.1-1.2由浏览器决定)，又是由font-size决定3.
offsetHeight还包括border2.預設情況下，line-height為normal(1.1-1.2由瀏覽器決定)，又由font-size決定offsetHeight也包含border
情況2：在子元素上分別設定所以，我們再來看：
p设置font-size:0;此时，span继承font-size:0,但border上下和2px，所以，p的offsetHeight=内容高度+border,内容高度=img的offsetHeight+span的2px，所以e1.offsetHeight-e2.offsetHeight=2才对情况2：在子元素上分别设置
font-size:0;img和span的情况和上述一样，但是p的font-size默认为16px;line-height情況1：在父元素p設定font-size:0;此時，span繼承font-size:0,但border上下和2px，所以，p的offsetHeight=內容高度+border,內容高度=img的offsetHeight+span的2px，所以e1.offsetHeight-e2.offsetHeight= 2才對font-size:0;img和span的狀況和上述一樣，但是p的font-size預設為16px;line-height值由瀏覽器決定，所以它的內容高度改變了，最後的數值由瀏覽器決定。 🎜