Pourquoi lorsque j'ajoute la taille de la police à h2, cela ajoute la hauteur de ligne à h2 ?

si vous inspectez le numéro 5, vous verrez que la hauteur de ligne est comme 5 px au-dessus de la pointe du nombre. Comment puis-je changer cela pour être juste à la pointe du nombre sans régler la hauteur de ligne sur quelque chose avec px?

résultat souhaitable
entrez la description de l'image ici


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>

Solution du problème

La propriété CSS line-height, si elle est définie sans unité, calculera sa valeur en fonction de la valeur font-size.

La valeur par défaut de line-height est d'environ 1,2, ce qui signifie qu'un texte avec une taille de police de 16px aura une hauteur de ligne de 19,2px (16 × 1,2) par défaut, et si vous augmentez la taille de la police à 20px, la ligne -height sera automatiquement changé en 24px (20 × 1.2).

Par conséquent, pour obtenir ce que vous voulez faire, vous pouvez soit définir explicitement une valeur avec l'unité qui correspond à la taille de la police, soit la définir 1pour signifier qu'il n'y a pas de 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>

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

Erreur Symfony : "Une exception a été levée lors du rendu d'un modèle"

j'essaie d'inclure <link href="{{ asset('css/mystyle.css') }}" rel="stylesheet"/> dans mon fichier twig et le rendre. Mais cela me donne une exception PHP non interceptée Twig_Error_Runtime : "Une exception a été levée lors du rendu d'un modèle ("Le fichier manifeste de l'actif "/../public/build/manifest.json" n'existe pas.") ça marche quand j'utilise link href="css/mystyle.css" rel="stylesheet"/> . Voici mon contrôleur: <?php namespace App\Controller; use Symfony\Component\Routing\Annotation\Route; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\Component\HttpFoundation\Response; class WelcomeController extends AbstractController { /** * @Route("/", name="welcome") */ public function index() { return $this->render('welcome/index.html.twig'); } } Voici mon modèle de brindille : <!doctype html> ...
Lire la suite

Détecter les appuis sur les touches fléchées en JavaScript

Comment détecter l'appui sur l'une des touches fléchées ? J'en ai profité pour savoir: function checkKey(e) { var event = window.event? window.event: e; console.log(event.keyCode) } Bien que cela fonctionnait pour toutes les autres touches, ce n'était pas le cas pour les touches fléchées (peut-être parce que le navigateur est censé faire défiler ces touches par défaut). Solution du problème event.key === "Flèche droite"... Plus récent et beaucoup plus propre: utilisez event.key . Plus de codes numériques arbitraires ! Si vous transpilez ou savez que vos utilisateurs utilisent tous des navigateurs modernes, utilisez ceci ! node.addEventListener('keydown', function(event) { const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown" }); Gestion détaillée : switch (event.key) { case "ArrowLeft": // Left pressed break; case "ArrowRight": // Right pressed break; c...
Lire la suite

Une chaîne vide donne "Des erreurs ont été détectées dans les arguments de la ligne de commande, veuillez vous assurer que tous les arguments sont correctement définis"

Image
Sur un serveur SQL 2016, j'ai un travail qui appelle un package SSIS. Ce package se trouve dans un projet dans la SSISDB et a des paramètres. L'un de ces paramètres est un type de chaîne vide par défaut. J'ai exécuté le travail avec la valeur vide pour ce paramètre, et il s'est exécuté avec succès. J'ai ensuite ouvert les propriétés du travail, je suis allé à l'étape qui appelle ce package et je suis entré dans la configuration et j'ai donné une valeur à ce paramètre. J'ai exécuté à nouveau le travail et il s'est exécuté avec succès, et la valeur du paramètre a eu l'effet attendu sur les résultats. Maintenant, je veux modifier le travail et redéfinir le paramètre sur une chaîne vide. En répétant ce que j'ai fait ci-dessus, j'ouvre la configuration et supprime complètement la valeur du paramètre. Lorsque j'essaie ensuite d'enregistrer les propriétés de l'étape du travail, j'obtiens une boîte de dialogue d'erreur a...
Lire la suite