line-height et images > Curiosité ?

**islogged** · 17/09/2012, 16h21

Bonjour,

Voici juste un exemple lambda de code qui exprime un résultat que je ne comprend pas :

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
 <!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Pb Css</title>
 
	<style type="text/css">		
		#google
		{
			line-height: 12px;			
		}
 
	</style>
</head>
<body>
	<div id='google'>
		<img src='https://www.google.com/favicon.ico'/><br/>
		<img src='https://www.google.com/favicon.ico'/>
	</div>
</body>
</html>

Si je spécifie un line-height: de 0 à 11px la 1ière image sera collé à la 2nde en hauteur !

Cela pour être logique car l'image ici à une hauteur de 32px donc l'on pourrait pensé qu'il faudrait un line-height: de 33px pour que l'on observe une interligne de 1px entre les 2 images !

Sauf qu'à partir d'un line-height: de 12px; on observe déjà cette interligne de 1px !!!

Je ne comprend pas la logique et cela me pose pb pour un autre projet dans un cas à peu près similaire !

j'espère que vous aurez compris (pas évident à expliquer)
Merci

**dev14** · 18/09/2012, 23h21

Salut, line-height à la base, ça n'a pas été conçu pour les textes?

Je ne pense pas que ce soit adapté à des images.

Pourquoi ne pas faire simplement un

Code :

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

div#google img{margin-bottom:30px;}

Puis sinon <br> aussi c'est plutôt pour les textes, l'idéal serait d'englober des deux images dans deux div :

Code :

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

1
2
3
4
<div id ='google'>
   <div id="img1"><img alt="..." src="..." /></div>
   <div id="img2"><img alt="..." src="..." /></div>
</div>

Au moins avec les div, tu es sûr que ça revient à la ligne, et après dans le CSS il faut du coup mettre quelque chose du genre :

Code :

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

div#google div{margin-bottom:30px;}

En espérant que ça t'aide

**Candygirl** · 19/09/2012, 08h26

Hello,

Par défaut ton image a un vertical-align:baseline; cela signifie que le bas de ton image est posée sur la ligne sur laquelle tu écris (si on prend l'image d'un cahier). Si, sur cette même ligne tu écris des lettres telles qu'un " g j p q y", tu constates que, par leur graphisme, elles descendent plus bas que "la ligne de base".

Lorsque du définis un line-height, celui-ci prévoit un espace au-dessus de la ligne de base mais aussi un, au-dessous, pour les caractères qui descendent.

The minimum height consists of a minimum height above the baseline and a minimum depth below it

C'est cet espacement que tu observes entre tes deux images. Je ne peux pas te dire précisément comment la taille de cet espace est calculé. Cela dépend de la police utilisée, du line-height, du font-size.

Par défaut, tu as un 1em de taille de caractère, soit, en général l'équivalent de 16px sur les navigateurs dont on n'a pas changé le réglage. En lui attribuant un line-height de 12px, tu demandes une hauteur de ligne plus petite que celle des caractères, du coup le navigateur doit compresser l'espacement au-dessus et au-dessous de la ligne de base jusqu'à rendre ce dernier nul.

Tu peux faire les manips suivantes, en partant à chaque fois de ton code de base, pour voir les choses en action:

Avec ton line-height de 11px, ajoute un font-size:9px (ce qui est un ratio "normal" entre le font-size et le line-height). Tu verras que ton espace réapparaît alors entre tes deux images.
ajouter un vertical-align:bottom ou top sur ton image, l'espace disparaîtra alors jusqu'à concurence d'un line-height de 16px (taille de ton image). A partir de 17px tu le verras logiquement apparaître).
Si tu fixes un vertical-align:middle, tu verras l'espace apparaître, j'imagine, lorsque l'espacement au dessus de la baseline est supérieur à la hauteur de la moitié de ton image.
Spécifie un font-family:courier et tu verras l'espace s'agrandir et être toujours présent avec un line-height de 10px.

**laffreuxthomas** · 19/09/2012, 10h05

Envoyé par Candygirl

Cela dépend de la police utilisée

Envoyé par Candygirl

Spécifie un font-family:courier et tu verras l'espace s'agrandir et être toujours présent avec un line-height de 10px.

Est-ce que cela signifie que chaque famille de fontes a ses propres proportions de hauteurs sous-baseline/sur-baseline ? Où est codée cette information ? Dans le fichier de la fonte ?
J'ai également une deuxième question proche du sujet. Une fonte peut-elle avoir un impact sur la taille du "em" (alias quadratin, alias la largeur d'un "M") ?

**Candygirl** · 19/09/2012, 10h40

Questions pertinentes auxquelles j'aimerais bien avoir des réponses documentées.

J'aurais tendance à répondre oui à tes deux questions, sur la base d'observations mais j'aimerais bien connaître la théorie sur le sujet... Peut-être une recherche genre "carractéristiques police de caractère") donnerait-elle quelque chose ? Je n'ai perso pas le temps de creuser le sujet.

Autrement il me semblerait logique que cette information provienne effectivement de la font elle-même ou alors soit calculée en fonction du ratio du dépassement au-dessus et au.dessous de la ligne de base des caractères de la police ?

Si tu trouves des informations je suis intéressée par ton retour

**laffreuxthomas** · 20/09/2012, 09h18

Envoyé par Candygirl

J'aurais tendance à répondre oui à tes deux questions, sur la base d'observations mais j'aimerais bien connaître la théorie sur le sujet...

J'ai également observé des choses étonnantes mais sans être sûr de rien.

Envoyé par Candygirl

Si tu trouves des informations je suis intéressée par ton retour

OK le (la) premier(e) qui trouve revient ici.

**islogged** · 20/09/2012, 09h49

Bonjour,

Merci pour vos explications ... mais je n'ai strictement rien compris !

Sous les conseils de dev14, j'ai placé des <div> avec pour résultat même pb !

Je vous exclut mon code, trop long / trop complexe :

Et à nouveaux vous présente une version très simplifier du problème !
Problème ma foie pourtant très simple !

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
44
45
46
47
48
49
50
51
52
53
54
55
 <!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Pb Css</title>
 
	<style type="text/css">	
		body
		{
			font-family:		Arial,Sans-Serif;	
			font-size:			12px;
			background-color:	#000000;
			color:				#ffffff;			
		}	
 
		#ico
		{
			position:		absolute;
			top:			0px;
			left:			0px;
		}
 
		#txt
		{
			position:	absolute;
			top:		0px;
			left:		16px;			
		}
 
		.espace
		{
			margin-bottom:	50px;		
		}
 
	</style>
</head>
<body>
	<div id='ico'></div><div id='txt'></div>
 
	<script>
		var mesIco = '<div class=\'espace\'><img src=\'http://wikipedia.org/favicon.ico\'/></div>';
		var monTxt = '<div class=\'espace\'>Wikipedia</div>';
 
		for( var i = 1; i < 50; i++)
		{
			mesIco = mesIco + '<div class=\'espace\'><img src=\'http://wikipedia.org/favicon.ico\'/></div>';
			monTxt = monTxt + '<div class=\'espace\'>Wikipedia</div>';
		}
 
		ico.innerHTML = mesIco;
		txt.innerHTML = monTxt;
 
	</script>
</body>
</html>

L'idée dans cette exemple et que mon texte taille 12 soit aligné (avec un espace de 50) sur la même ligne que c'elle de l'icone (espace aussi de 50) !

En résolvant ce problème simplifier, vous résoudrez forcément mon pb général !
Personnellement j'ai essayé 150 trucs toujours sans succès!

Merci

line-height et images > Curiosité ?

CSS

Vue hybride

Discussions similaires

Partager

Partager