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>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 class="a">line-height: 1<br>lorem ipsum dolor sit amet</p>
<p class="b">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 class="c">line-height: 0.5<br>lorem ipsum dolor sit amet</p>
<p class="d">line-height: 0<br>lorem ipsum dolor sit amet</p>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>