Terdapat dua elemen img span dalam p.
1. Tetapkan saiz fon:0px
pada 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>
Simpan sebagai car1.html, dan hasil larian ialah 0.
2. Tetapkan saiz fon:0px
pada dua elemen anak 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>
Simpan sebagai car2.html, dan hasil larian ialah 6px.
Bagaimana untuk menerangkan tingkah laku ini?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ini ialah kesan saiz fon pada teg img. Semakin besar saiz fon p lapisan luar yang mengelilingi elemen img, semakin besar margin bawahnya. Sebagai elemen sebaris, span tidak setinggi img dan boleh diabaikan. Perbezaan ketinggian antara e1 dan e2 ialah ruang antara img dan p. (Sudah tentu anda perlu mengulas keluar sempadan, dan hanya apabila p font-size:0 anda boleh mendapatkan e1-e2 sama dengan 0).
Tegaskan satu perkara: kes 1 hendaklah 2
Tiga mata: Ketinggian
1.p disokong oleh
line-height.line-height撑起。2.默认情况下，
line-height为normal(1.1-1.2由浏览器决定)，又是由font-size决定3.
offsetHeight还包括border所以，我们再来看：ketinggian baris ialah biasa (1.1-1.2 ditentukan oleh penyemak imbas), yang ditentukan oleh saiz fon
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. Secara lalai,font-size:0dalam elemen indukppada masa ini,spandiwarisifont-size:0, tetapisempadanatas dan bawah ialah 2px, jadip'soffsetHeight=tinggi kandungan +sempadan, ketinggian kandungan=img'soffsetHeight+span's 2px, jadie1. offsetHeight-e2.offsetHeight= 2adalah betul🎜Kes 2: Tetapanfont-size:0;imgdanspanpada anak elemen masing-masing dan Sama seperti di atas, tetapifont-splalai kepada16pxline-heightnilai ditentukan oleh penyemak imbas Jadi ketinggian kandungannya berubah dan nilai akhir ditentukan oleh penyemak imbas. 🎜