Clairification sur la valeur Height [avancé]

Bonjour,

Je travaille récemment sur un projet où l'on doit suivre une grille de positionnement horizontale.

À cet effet, je suis tomber sur quelques comportements de la valeur height que je ne suis pas certains de bien saisir.

À la base, j'ai toujours cru que la valeur height par défaut était la valeur du line-height d'un bloc. Donc, si j'ai trois ligne dans mon paragraphe et que ce bloc a un line-height de 20px, le height du bloc par défaut (height:auto;) devrait être de 60px. Cela semble fonctionner dans le cas d'un paragraphe.

Cependant, cela ne semble pas être le cas d'autres éléments HTML. Par exemple, dans le cadre d'une liste (ul ou ol), j'ai remarqué que souvent j'avais un léger décalage (1px peut-être) malgré avoir remis à 0 les marges et les padding.

Alors, je me suis dit qu'il devait s’agir d'un comportement propre à des éléments en display: list-item. Mais même en les passant en display: block; j'ai le même résultat.

Et, si je fixe la hauteur à 20px, tout rentre dans la grille sans rechigner.

Savez-vous d'où pourrait venir se comportement et à quoi il est dû ?

Salut,

Aurais-tu une page en ligne montrant le problème ?

Ça peut venir de pas mal de choses : bordure supplémentaire, arrondi sur une valeur, propriété `display` modifiée, difficile de te répondre à l’aveugle.

À propos, connais-tu #grid ? Superbe outil pour travailler avec les grilles typographiques.

Salut,

Je vais essayer de donner un exemple en ligne lundi.

Je ne connaissais pas #grid, j'utilise présentement la Headsup Grid

Voilà un exemple en ligne. Il s'agit des listes dans la sidebar:

*http://dev.ressacmedia.com/ressac_new_site/case.php

Hello.

Tu as un souci d'espace indésirable ou similaire sous Chrome visiblement. Un display: block sur les liens de ta sidebar semble faire rentrer le tout dans l'ordre.

EDIT: Un vertical-align: top corrige également le souci, mais en conservant le comportement initial du lien (uniquement le texte est cliquable).
Modifié par Florian_R (14 Nov 2011 - 18:25)

Et vous avez une idée de la raison derrière ce comportement ?

Actuellement sous Fx/Mac et Chrome/Mac je ne vois aucun souci. Tu as corrigé quelque chose depuis ?

Très sympa le script que tu utilises, je vais m’empresser de le tester.

À propos des grilles (c’est l’occasion !) j’en parle en long et large et en travers dans une suite de trois billets sur Typographisme, si tu as des remarques sur le sujet, n’hésite pas, je suis preneur.

– http://typographisme.net/post/Macro-typographie-sur-le-Web-Quelques-outils ;
– http://typographisme.net/post/Macro-typographie-sur-le-Web-Mise-en-pratique ;
– http://typographisme.net/post/Macro-typographie-sur-le-Web-%E2%80%93-Less-is-more.

Arf, désolé j'avais uploadé le fix de la side bar corrigé. J'ai remis la version bogué, mais si jamais, il faut seulement enlever le "display: block;" des <a> dans le sidebar (par firebug par exemple).