search

Home  >  Q&A  >  body text

Strange behavior with font-size:0px

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?

怪我咯怪我咯2738 days ago780

reply all(2)I'll reply

  • 巴扎黑

    巴扎黑2017-05-19 10:20:44

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

    reply
    0
  • 淡淡烟草味

    淡淡烟草味2017-05-19 10:20:44

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

    reply
    0
  • Cancelreply