Why when i add font size to h2, it adds line height to h2?-CodePudding

if you inspect number 5 you will see that line height is like 5 px above the tip of the number.. How can i change that to be just at the tip of the number without setting the line-height to something with px?

desirable result enter image description here

html,body{
    margin: 0;
    padding: 0;
}
h1 {
    margin: 0;
}
h2 {
    margin: 0px;
    
}


body {
    background-image: url("team2.jpg");
    background-size: cover;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.5em;
    text-align: center;
    margin:20px 0 0 0;
}

#count-el{
/* margin: 10px 0 0 0; */
    font-size: 4em;
    height:max-content;
    

}

<html lang="en">
<head>
    <link rel="stylesheet" href="index.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascrpit project1</title>
</head>
<body>
    <div><h1>People entered</h1>
    <h2 id="count-el">0</h2>
    </div>
    <script>
        document.getElementById("count-el").innerText = 5
    </script>
    
</body>
</html>

CodePudding user response：

The CSS line-height property, if defined without a unit, will calculate its value based on the font-size value.

The default value of line-height is around 1.2 that means a text with font-size of 16px will have a line-height of 19.2px (16 × 1.2) by default, and if you increase the font-size to 20px, the line-height will automatically be changed to 24px (20 × 1.2).

Therefore, to achieve what you want to do, you can either explicitly set a value with unit that matches the font-size, or set it to 1 to mean no multiplication.

p {
  font-size: 20px;
  text-decoration: underline;
}

p.a {
  line-height: 1;
}

p.b {
  line-height: 20px;
}

p.c {
  line-height: 0.5;
}

p.d {
  line-height: 0;
}

<p>line-height: normal<br>lorem ipsum dolor sit amet</p>
<p >line-height: 1<br>lorem ipsum dolor sit amet</p>
<p >line-height: matching font-size<br>lorem ipsum dolor sit amet</p>

<br>
<em>You can even set a value less than 1 (without unit) to down-scale it:</em>
<br>

<p >line-height: 0.5<br>lorem ipsum dolor sit amet</p>
<p >line-height: 0<br>lorem ipsum dolor sit amet</p>

CodePudding user response：

It's not pretty but you can set margin-top to a negative fraction of an em e.g. margin-top: -0.3em;, as in this snippet:

html,body{
    margin: 0;
    padding: 0;
}
h1 {
    margin: 0;
}
h2 {
    margin-top: -0.3em;
    }


body {
    background-image: url("team2.jpg");
    background-size: cover;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.5em;
    text-align: center;
    margin:20px 0 0 0;
}

#count-el{
/* margin: 10px 0 0 0; */
    font-size: 4em;
    height:max-content;
    

}

<html lang="en">
<head>
    <link rel="stylesheet" href="index.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascrpit project1</title>
</head>
<body>
    <div><h1>People entered</h1>
    <h2 id="count-el">0</h2>
    </div>
    <script>
        document.getElementById("count-el").innerText = 5
    </script>
    
</body>
</html>