Hauteurs du texte et des marges

**eleydet** · 22/01/2017, 10h38

Bonjour,

C'est encore moi! Je pense finalement retenir la solution ci-dessous.

Dans le titre, la hauteur du texte est de 1.3 em et les marges intérieures de 0.4 em. Cela devrait donner une hauteur totale de 1.3+0.4+0.4=2.1em. Pourquoi cette hauteur totale, obtenue suite à plusieurs essais, est de 2.6em (il faut donc définir le "top" à 2.6em pour le div)?

Merci par avance pour vos réponses.

Code :

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
	font-family: sans-serif;
}
h1 {
	position:fixed;
	top:0;
	left:0;
	right:0;
	margin:0;
	font-size: 1.3em;
	padding: 0.4em;
	padding-left: 0.8em;
	background-color: #444;
	background-image: linear-gradient(#666, #333);
	color: #ddd;
	text-align: left;
}
div {
	position: fixed;
	top: 2.6em;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	padding: 1em;
}
</style>
</head>
<body>
<h1>Le titre</h1>
<div>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
</div>
</body>
</html>

**friendofweb** · 22/01/2017, 11h36

Bonjour,

Juste pour comprendre, comment fais-tu pour mesurer cette valeur (2.6em) ?

Aperçu de ton code

**friendofweb** · 22/01/2017, 12h51

Après quelques recherches, si j'ai bien compris, l'unité em est une unité relative et dépend de la configuration du navigateur, de la taille de la police utilisée par défaut, c'est à dire 1em = 100% (de mémoire). Donc, je me demande s'il n'est pas préférable d'utiliser une unité de valeur absolue, comme le px et cetera. Plus d'infos : length.

Pour rester sur www.developpez.net, voici un autre article style-base

**eleydet** · 22/01/2017, 14h36

Bonjour,

friendofweb a écrit : Juste pour comprendre, comment fais-tu pour mesurer cette valeur (2.6em) ?

Si je prend une valeur plus grande ou plus petite, la barre de défilement (ou l'ascenseur vertical) ne s'ajuste pas parfaitement au bord inférieur de la barre de titre.

**friendofweb** · 22/01/2017, 17h27

Je comprends, malheureusement, je ne sais pas comment résoudre ce souci. En espérant, que nos "Gourous" viennent éclairer notre lanterne...
J'ai mis un background en couleur dans l'aperçu, pour mieux voir.

**friendofweb** · 22/01/2017, 19h25

Supprimer

Code css :

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

overflow: auto;

de la ligne 29 ? De l'aperçu ?

**NoSmoking** · 22/01/2017, 20h12

Bonjour,

1.3+0.4+0.4=2.1em

ce calcul est faux et ce compte tenu de l'unité de valeur em !
Il aurait plutôt fallu écrire 1.3 +(0.4 *1.3) +(0.4 *1.3).

Partons de la valeur par défaut de la font à 16px.
En posant font-size:1.3em, on obtient une valeur de font de 20.8px, à partir de maintenant tous les calculs se feront sur base de cette valeur, donc le padding sera de 8.32px (0.4 * 20.8).

Le résultat devient donc 20.8 + 8.32 +8.32 = 37.44 px.

Tu me diras « Oui mais on n'obtient pas 41.6px »

Il reste un point important à prendre en compte, ce sont les valeurs par défaut des navigateurs et une non négligeable la line-height.
Pour t'en convaincre il suffit de mettre celle-ci à 1em et de regarder ce que cela donne, tu devrait retomber sur 37.44px.

C'est un peu sioux mais une fois que l'on a assimilé cela roule tout seul ou presque.

Sinon il existe l'unité rem, à lire font-size sur MDN.

Invité · 23/01/2017, 09h34

Bonjour,

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
h1 {
...
	/*padding: 0.4em; supprimer */
	padding-left: 0.8em;
	height: 3rem;
	line-height:3rem;
...
}
div {
	position: fixed;
	top: 3rem;
...
}

Cela dit, NoSmoking t'avait donné une solution avec flexbox, plus... flexible !

**friendofweb** · 23/01/2017, 11h23

Envoyé par NoSmoking

Il reste un point important à prendre en compte, ce sont les valeurs par défaut des navigateurs et une non négligeable la line-height.
Pour t'en convaincre il suffit de mettre celle-ci à 1em et de regarder ce que cela donne, tu devrait retomber sur 37.44px.

C'est un peu sioux mais une fois que l'on a assimilé cela roule tout seul ou presque.

Sinon il existe l'unité rem, à lire font-size sur MDN.

Bonjour NoSmoking,

Quand tu dis "il suffit de mettre celle-ci à 1em", tu parles de line-height qui si j'ai bien compris, par défaut est à 16px ?
J'ai fait une expérience sur la propriété line-height dont voici un aperçu..

En outre, le w3schools dit que la plupart des navigateurs oscillent à 110% ou 120%. Pourtant, dans mon test, les 3 premiers paragraphes semblent avoir la même taille !
Le premier à la valeur par défaut, le second 100% et le troisième est à 16px. (test fait sous Google Chrome - Version 55.0.2883.87 (64-bit)).
Par contre, avec Firefox 50.1.0, la différence est flagrente entre le premier et le second paragraphe !

Invité · 23/01/2017, 13h23

Envoyé par friendofweb

...le w3schools dit que...

ATTENTION de ne pas confondre avec le W3C (World Wide Web Consortium) !!

Le W3C est la SEULE REFERENCE fiable !

Et surtout : il ne faut pas oublier que ce sont des RECOMMANDATIONS.

**friendofweb** · 23/01/2017, 14h19

Envoyé par NoSmoking

Partons de la valeur par défaut de la font à 16px.
En posant font-size:1.3em, on obtient une valeur de font de 20.8px, à partir de maintenant tous les calculs se feront sur base de cette valeur, donc le padding sera de 8.32px (0.4 * 20.8).

Le résultat devient donc 20.8 + 8.32 +8.32 = 37.44 px.

A partir d'ici, je ne comprends pas. (friendofweb)

Tu me diras « Oui mais on n'obtient pas 41.6px »

Il reste un point important à prendre en compte, ce sont les valeurs par défaut des navigateurs et une non négligeable la line-height.
Pour t'en convaincre il suffit de mettre celle-ci à 1em et de regarder ce que cela donne, tu devrait retomber sur 37.44px.

C'est un peu sioux mais une fois que l'on a assimilé cela roule tout seul ou presque.

Sinon il existe l'unité rem, à lire font-size sur MDN.

C'est la raison pour laquelle je demande si tu parles de line-height ou bien de font-size à définir à 1em Parce que ce que si font-size est défini à 100% donc 16px par défaut, j'obtiens un résultat de 28.8px

Raisonnement :

Code css :

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

1
2
3
font-size: 1em; /* équivant à 16px par défaut, 100% ... */
padding: 0.4em; /* 6.4px, 40% de 16px */
/* Résultat = 16px + (6.4x2) = 28.8px */

Est-ce correct ?

**friendofweb** · 23/01/2017, 19h29

Pour info, j'ai testé line-height pour le code de eleydet et le résultat est ambigu, parce que j'ai fait un "fork" de l'aperçu... et dans un cas, je dois mettre une valeur x et dans l'autre y, pour arriver à un même résultat...

**NoSmoking** · 23/01/2017, 19h52

C'est la raison pour laquelle je demande si tu parles de line-height ou bien de font-size ...[/C]

Je parle bien de line-height.

Raisonnement :
...
Est-ce correct ?

Oui.

J'ai bien peur que tu t'embrouilles tout seul !

Prenons FireFox avec une font-size par défaut de 16px.

Prenons une balise <h1> sans lui appliquer de style particulier, nous pourrons lire le CSS, entre autres, suivant, via un F12

Code :

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

1
2
3
4
5
6
.titre-std {
  font-size: 32px;
  margin: 21.4333px 0;
  line-height: 40px;
  height: 40px;
}

on voit que line-height ne correspond pas à la taille de la font.

Si maintenant je redéfinie la font-size à 1.5em je vais obtenir le CSS suivant

Code :

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

1
2
3
4
5
6
.titre-1_5em {
  font-size: 24px;
  margin: 16.0833px 0;
  line-height: 31px;  
  height: 31px;
}

on observe que certaines valeurs changent lorsque l'on change la taille de la font.

**friendofweb** · 24/01/2017, 12h15

Un grand merci pour cette explication pertinente ! Pour info, j'ai dû désactiver "Firebug" pour avoir ses informations... Et à priori, l'outils de développement proposé par défaut (dans firefox) semble plus complet que "firebug"...

**eleydet** · 24/01/2017, 21h17

Bonsoir,

Les solutions utilisant "rem" et "flex" me semblent un peu récentes... Je préfère attendre avant de les utiliser. Je retiens donc la solution de jreaux62, en remplaçant "rem" par "em", et en calculant la hauteur comme l'a expliqué NoSmoking :
2,6 = 1,3 x 2
Ceci étant, je vais continuer d'étudier ce que vous avez écrit. Merci à tous!

Code :

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
h1 {
	position:fixed;
	top:0;
	left:0;
	right:0;
	margin:0;
 
	font-size: 1.3em;
	height: 2em;
	line-height: 2em;
 
	padding-left: 0.8em;
	background-color: #444;
	background-image: linear-gradient(#666, #333);
	color: #ddd;
	text-align: left;
}
div {
	position: fixed;
 
	top: 2.6em;
 
	left: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	padding: 1em;
	margin:0;
}

Hauteurs du texte et des marges

Dimensionnement en CSS

Discussions similaires

Partager

Partager