Il y a deux éléments img span dans un p.
1. Définir la taille de la police : 0px
sur 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>
Enregistrez-le sous car1.html et le résultat est 0.
2. Définissez font-size:0px
sur les deux éléments enfants de 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>
Enregistrez-le sous car2.html, et le résultat d'exécution est 6px.
Comment expliquer ce comportement ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
C'est l'effet de la taille de la police sur la balise img. Plus la taille de police p de la couche externe entourant l’élément img est grande, plus la marge inférieure sera grande. En tant qu'élément en ligne, span n'est pas aussi élevé que img et peut être ignoré. La différence de hauteur entre e1 et e2 est l'espace entre img et p. (Bien sûr, vous devez commenter la bordure, et ce n'est que lorsque p font-size:0 que vous pouvez obtenir e1-e2 égal à 0).
Soulignez une chose : le cas 1 devrait être le cas 2
Trois points : La hauteur de
1.p est prise en charge par
line-height.line-height撑起。2.默认情况下，
line-height为normal(1.1-1.2由浏览器决定)，又是由font-size决定3.
offsetHeight还包括border所以，我们再来看：
3.情况1：在父元素
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-height2. Par défaut,line-heightestnormal(1.1-1.2 est déterminé par le navigateur), qui est déterminé parfont-size.offsetHeightinclut également uneborder🎜 🎜Alors, regardons : 🎜Cas 1 : définissezfont-size:0dans l'élément parentpà ce moment-là,spanhérite ;font-size:0, maisborderhaut et bas font 2 pixels, doncoffsetHeight=hauteur du contenu dep+border, content height =offsetHeightdeimg+ 2px despan, donce1. offsetHeight-e2.offsetHeight= 2est correct🎜Cas 2 : définition defont-size:0;imgetspansur l'enfant éléments respectivement et Identique à ci-dessus, mais lafont-sizedepest par défaut16pxlaline-height; > La valeur est déterminée par le navigateur. Ainsi, la hauteur de son contenu change et la valeur finale est déterminée par le navigateur. 🎜