简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Strange behavior with font-size:0px
怪我咯
怪我咯 2017-05-19 10:18:44
0
2
735

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?

怪我咯
怪我咯

走同样的路，发现不同的人生

reply all(2)
巴扎黑
巴扎黑2017-05-19 10:20:44 2 floor

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).

Like +0
Add Reply
淡淡烟草味
淡淡烟草味2017-05-19 10:20:44 1 floor

Point out one thing: case 1 should be 2

Three points: The height of
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-height is normal (1.1-1.2 is determined by the browser), which is determined by font-size

3.offsetHeight also includes border


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-heightCase 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

Case 2: Setting 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. 🎜
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！