Pourquoi mon bandeau fait plus de 60 pixels ?

**JPBruneau** · 15/02/2020, 13h43

Bonjour,
Je croyais avoir mis même plus d'instruction que nécessaire mais mon bandeau est encore un peut plus grand que 60 pixels ...
Pouvez vous me dire le manque, ou le pourquoi, mille mercis d'avance
(copiez collez dans un html ça marchera pour tester ..)

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<!DOCTYPE html>
<html class="no-js">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
    padding:0;
    margin:0;
}
div.Row{
  display:flex;
  align-items: center; 
  justify-content: center;  
  background:#cccccc;   
  margin:0;
  padding:0;
}
 
img.lelogo {
 height:60px;
 margin:0;
 padding:0;
}
h1.site-name {
    font-size: 60px;
    padding:0;
    margin:0;
}
</style>
</head>
<body>
 
<div class="Row">
 <img src="http://www.fox-infographie.com/logo.png"  class="lelogo" /> <h1 class="site-name" >Le nom du Site que je veux</h1>
</div>
</body>

Invité · 15/02/2020, 17h38

Bonjour,

pour comprendre, il faut s’intéresser à la typographie : Comprendre l’anatomie du caractère typographique.

La font-size ne définit pas stricto sensu la hauteur totale nécessaire à l'affichage de la police.

Dans ton exemple, modifie :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
div.Row{
  align-items: flex-end; 
...

et :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<h1 class="site-name">Le nom À É du Site que je veux</h1>

Dans l'Inspecteur (F12), en plaçant le curseur sur le <img>, on visualise sa hauteur (60px).
On constate aussi que les accents sur les majuscules À É sont "en dehors" de ces 60px.

En clair : il ne faut pas compter sur font-size pour dimensionner un bloc en hauteur.

Tu peux toujours définir une hauteur pour le <h1> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
h1.site-name {
    height:60px;
...

Mais alors, les jambages... dépassent !

**JPBruneau** · 16/02/2020, 03h20

Super merci, c'est pointu et on oubli toijour cela, chapeau, l'ami !
J'avais pensé aussi à l'influence des g q etc...

**NoSmoking** · 17/02/2020, 11h22

Bonjour,
la hauteur du conteneur ne dépend pas que de la font-size mais également de la font-family.

Fichier exemple, dans mes tablettes, pour visualiser le phénomène :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hauteur FONT et conteneur</title>
<meta name="Author" content="NoSmoking">
<style>
html, body {
  margin: 0;
  padding: 0;
  font-size: 1em;
}
p {
  margin: 0 1em;
}
.conteneur {
  position: relative;
  margin: 1em 1em 0;
  text-align: center;
  font-size: 60px;
  background: #EEE;
}
.conteneur:before, .conteneur:after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  box-sizing: border-box;
  height: 1em;
}
.conteneur:before {
  bottom: 0;
  border-top: 1px solid currentColor;
  border-left: 10px solid currentColor;
  color: #F06;
}
.conteneur:after {
  top: 0;
  border-right: 10px solid currentColor;
  border-bottom: 1px solid currentColor;
  color: #06F;
}
.font-1 {
  font-family: Verdana;
}
.font-2 {
  font-family: Times New Roman;
}
.font-3 {
  font-family: cursive;
}
.font-4 {
  font-family: monospace;
}
</style>
</head>
<body>
  <div class="conteneur font-1"> Çà et Être ou ne pas être ! </div>
  <div class="conteneur font-2"> Çà et Être ou ne pas être ! </div>
  <div class="conteneur font-3"> Çà et Être ou ne pas être ! </div>
  <div class="conteneur font-4"> Çà et Être ou ne pas être ! </div>
<script>
const elements = document.querySelectorAll(".conteneur");
elements.forEach((el) => {
  const elStyle = window.getComputedStyle(el, null);
  const height = elStyle.height;
  const font = elStyle.fontFamily;
  const fontSize = elStyle.fontSize;
  el.insertAdjacentHTML("afterend", `<p>font : ${font}, ${fontSize}<br>height : ${height}</p>`);
});
</script>  
</body>
</html>

**JPBruneau** · 18/02/2020, 00h18

Merci l'Ami pour ta solution !!

**NoSmoking** · 18/02/2020, 18h06

pour ta solution !!

Ce n'est pas une solution mais un constat !

Si tu veux avoir une hauteur définie pour un titre, ou autre, donné il te faut avoir la démarche inverse, ajuster la font-size suivant la hauteur du bloc contenant.

Tu peux le faire de façon simple et automatique en fixant une line-height qui contient l'intégralité en hauteur du texte en ajuster la font-size .
EXIT donc line-height:60px, dans ton cas, qui est un mauvais choix, une partie du texte serait potentiellement hors conteneur comme déjà dit et ce n'est pas souhaitable.

Comment procéder ?

• Quelle line-height choisir ?

On a vu, dans l'exemple que j'ai fourni, que cela va dépendre de la font-family, et si on reprends on à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
font    : Verdana, 60px
height  : 73px
rapport : 1.21666
---------------------------
font    : "Times New Roman", 60px
height  : 69px
rapport : 1.15
---------------------------
font    : cursive, 60px
height  : 83px
rapport : 1.38333

On choisi, suivant la font-family utilisée, de fixer la line-height à la valeur du rapport, arrondir au dessus.

• Quelle font-size choisir ?
Là on va laisser faire le navigateur via le CSS en utilisant la méthode calc() ce qui donne simplement par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.font-cursive {
  font-family: cursive;
  font-size: calc( 60px / 1.4);
  line-height: 1.4;
}
.font-verdana {
  font-family: Verdana;
  font-size: calc( 60px / 1.25);
  line-height: 1.25;
}

Résultat :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
font : cursive, 42.8571px
height : 60px
---------------------------
font : Verdana, 48px
height : 60px

Les textes, plutôt leur font-size, seront ainsi ajustés au « mieux » de la hauteur sans risque d'être tronqués et ton conteneur aura la hauteur souhaitée.

Là sur le coup c'est une solution mais bon ..!

Pourquoi mon bandeau fait plus de 60 pixels ?

CSS

Vue hybride

Discussions similaires

Partager

Partager