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

La fonction GCP Cloud pour écrire des données dans BigQuery s'exécute avec succès, mais les données n'apparaissent pas dans la table BigQuery

Image
J'exécute la fonction cloud suivante. Il s'exécute avec succès et indique que les données ont été chargées dans la table. Mais lorsque j'interroge BigQuery, aucune donnée n'a été ajoutée. Je ne reçois aucune erreur et aucune indication que cela ne fonctionne pas. from google.cloud import bigquery import pandas as pd def download_data(event, context): df = pd.read_csv('https://covid.ourworldindata.org/data/ecdc/full_data.csv') # Create an empty list Row_list =[] # Iterate over each row for index, rows in df.iterrows(): # Create list for the current row my_list =[rows.date, rows.location, rows.new_cases, rows.new_deaths, rows.total_cases, rows.total_deaths] #print(my_list) # append the list to the final list Row_list.append(my_list) ## Get Biq Query Set up client = bigquery.Client() table_id = "<project_name>.raw.daily_load" table = client.get_table(table_id) print(client) print(table_id) print(table) errors = client.insert_rows(...
Lire la suite

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

Le shell POSIX (sh) redirige stderr vers stdout et capture stderr et stdout dans des variables

Je voudrais rediriger stderr vers stdout afin qu'un terminal les imprime tous les deux lors de l'exécution d'une commande, mais je voudrais également les capturer tous les deux dans des variables distinctes. J'ai réussi à y parvenir dans Bash (version 4.4.20(1)-release): #!/bin/bash echo "terminal:" { err="$(find / -maxdepth 2 -iname 'tmp' -type d 2>&1 1>&3 3>&- | tee /dev/stderr)"; ec="$?"; } 3>&1 | tee /dev/fd/4 2>&1; out=$(cat /dev/fd/4) echo "stdout:" && echo "$out" echo "stderr:" && echo "$err" cela donne souhaité: terminal: find: '/root': Permission denied /tmp /var/tmp find: '/lost+found': Permission denied stdout: /tmp /var/tmp stderr: find: '/root': Permission denied find: '/lost+found': Permission denied mais j'ai un problème pour convertir ce script en POSIX sh /bin/sh #!/bin/sh echo "term...
Lire la suite