There are two elements img span in a p.
1. Set font-size:0px
on p
<!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>
Save as car1.html, the running result is 0.
2. Set font-size:0px
on the two child elements of p<!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>
Save it as car2.html, and the running result is 6px.
Excuse me, how to explain this behavior?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This is the effect of font-size on the img tag. The larger the p font-size of the outer layer surrounding the img element, the larger the bottom margin will be. As an inline element, span is not as high as img and can be ignored. The height difference between e1 and e2 is the space between img and p. (Of course you have to comment out the border, and only when p font-size:0 can you get e1-e2 equal to 0).
Point out one thing: case 1 should be 2
Three points: The height of
3.1.p is supported by
line-height.line-height撑起。2.默认情况下，
line-height为normal(1.1-1.2由浏览器决定)，又是由font-size决定3.
offsetHeight还包括border2. By default,line-heightisnormal(1.1-1.2 is determined by the browser), which is determined byfont-sizeoffsetHeightalso includesborder
Case 2: SettingSo, let’s look at:
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-heightCase 1: Setfont-size:0in the parent elementp; at this time,spaninheritsfont-size:0, butbordertop and bottom are 2px, sop'soffsetHeight=content height +border, content height=img'soffsetHeight+span's 2px, soe1.offsetHeight-e2.offsetHeight= 2is correctfont-size:0;imgandspanon child elements respectively and The same as above, but thefont-sizeofpdefaults to16px; theline-heightvalue is determined by the browser. So its content height changes and the final value is determined by the browser. 🎜