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?
走同樣的路,發(fā)現(xiàn)不同的人生
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
1.p is supported by line-height
. line-height
撐起。
2.默認(rèn)情況下,line-height
為normal
(1.1-1.2由瀏覽器決定),又是由font-size
決定
3.offsetHeight
還包括border
2. By default, line-height
is normal
(1.1-1.2 is determined by the browser), which is determined by font-size
offsetHeight
also includes border
So, let’s look at: p
設(shè)置font-size:0
;此時(shí),span
繼承font-size:0
,但border
上下和2px,所以,p
的offsetHeight
=內(nèi)容高度+border
,內(nèi)容高度=img
的offsetHeight
+span
的2px,所以e1.offsetHeight-e2.offsetHeight=2
才對(duì)
情況2:在子元素上分別設(shè)置font-size:0
;img
和span
的情況和上述一樣,但是p
的font-size
默認(rèn)為16px
;line-height
Case 1: Set font-size:0
in the parent element p
; at this time, span
inherits font-size:0
, but border
top and bottom are 2px, so p
's offsetHeight
=content height + border
, content height=img
's offsetHeight
+span
's 2px, so e1.offsetHeight-e2.offsetHeight= 2
is correct
font-size:0
; img
and span
on child elements respectively and The same as above, but the font-size
of p
defaults to 16px
; the line-height
value is determined by the browser. So its content height changes and the final value is determined by the browser. ??