javascript - font-size:0px的奇怪行为
一个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.
请问，如何解释这种行为？
