Aller au contenu


[Css] Display Inline-Block: Régler Le Bug Des Marges


  • Vous ne pouvez pas répondre à ce sujet
No replies to this topic

#1 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 20 959 Messages :
  • Gender:Male

Posté 03 juin 2011 - 10:01

Display inline-block: régler le bug des marges





Le positionnement en CSS est une pratique personnelle: pour arriver à un résultat donné, plusieurs méthodes sont souvent possibles. Néanmoins, ces méthodes ne sont pas nécessairement équivalentes, ne serait-ce que vis à vis du respect des normes et de leur esprit.

Ainsi, le recours à un positionnement avec la propriété float est couramment utilisé. Pourtant, dans la plupart des cas, il n'est pas utilisé à "bon escient", n'étant pas prévu pour cela exactement, mais avec une efficacité très appréciable (malgré quelques contraintes).

Or, depuis CSS2, la propriété display propose un arsenal de valeurs pour positionner efficacement, que les navigateurs il est vrai tardent ou ont tardé à implémenter.

Toutefois, la valeur inline-block est désormais utilisable dans bien des cas.

Si vous m'avez suivi jusqu'ici, je suppose que le nom-même de cette valeur de la propriété display ne vous est pas inconnue, son nom parlant de lui-même: inline-block

Simplement, quand on l'utilise, un petit moment de stupeur arrive: de petites marges latérales apparaissent entre chaque bloc ainsi positionné. :/


En général, on commence par douter de soi-même: vérifications et tests sur les propriétés margin, padding, ce genre de choses, mais rien, aucun bon résultat.
On ne va tout de même pas utiliser position: relative tout de même !

Non, rassurez-vous, il y a bien plus simple.

Ce qu'il faut comprendre, c'est que ces écarts indésirables et non-justifiés entre blocs positionnés avec display: inline-block sont générés par ... des sauts de lignes dans votre code !

C'est atypique (cela fait comme pour la balise pre sauf que là, ce n'est pas attendu).

Il y a deux solutions simples:

Première solution: mettre les blocs sur la même ligne de code, sans saut de ligne, et tant pis pour la lisibilité du code.

Deuxième solution: se permettre les sauts de ligne dans le code, mais insérer des commentaires HTML vides de la façon suivante:
  • à la fin de la ligne avant le saut de ligne, mettre <!--
  • au début de la ligne avant le saut de ligne, mettre -->

Remarquons enfin que ces solutions ne nécessiteront pas de mises à jour quand ce bug sera résolu par les navigateurs, sauf éventuellement pour faire plus propre.

Une nouvelle gymnastique peut voir le jour ! :kimouss:


En savoir plus:

http://stackoverflow...ck-extra-margin
http://www.quirksmod...ss/display.html
http://www.alsacreat...te-display.html
http://www.alsacreat...line-block.html
http://jeremie.paton...ay-inline-block



0 utilisateur(s) en train de lire ce sujet

0 membre(s), 0 invité(s), 0 utilisateur(s) anonyme(s)