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?
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
还包括border
2. By default,line-height
isnormal
(1.1-1.2 is determined by the browser), which is determined byfont-size
offsetHeight
also includesborder
So, 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-height
Case 1: Setfont-size:0
in the parent elementp
; at this time,span
inheritsfont-size:0
, butborder
top and bottom are 2px, sop
'soffsetHeight
=content height +border
, content height=img
'soffsetHeight
+span
's 2px, soe1.offsetHeight-e2.offsetHeight= 2
is correctfont-size:0
;img
andspan
on child elements respectively and The same as above, but thefont-size
ofp
defaults to16px
; theline-height
value is determined by the browser. So its content height changes and the final value is determined by the browser. 🎜