si inspecciona el número 5, verá que la altura de la línea es como 5 px por encima de la punta del número. ¿Cómo puedo cambiar eso para que esté solo en la punta del número sin establecer la altura de la línea en algo con px?
resultado deseable ingrese la descripción de la imagen aquí
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>La propiedad line-height CSS, si se define sin una unidad, calculará su valor en función del valor del tamaño de fuente.
El valor predeterminado de altura de línea es de alrededor de 1,2, lo que significa que un texto con un tamaño de fuente de 16 px tendrá una altura de línea de 19,2 px (16 × 1,2) de forma predeterminada, y si aumenta el tamaño de fuente a 20 px, la línea -la altura se cambiará automáticamente a 24px (20 × 1,2).
Por lo tanto, para lograr lo que desea hacer, puede establecer explícitamente un valor con una unidad que coincida con el tamaño de fuente, o establecerlo en 1 para que no signifique multiplicación.
p { font-size: 20px; text-decoration: underline; } pa { line-height: 1; } pb { line-height: 20px; } pc { line-height: 0.5; } pd { 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>No es bonito, pero puede establecer margin-top en una fracción negativa de un em , por ejemplo margin-top: -0.3em; , como en este fragmento:
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>