Mettre des marge hautes et basses à des balises en-ligne [241 mots]

Posté le 18 sept. 2009 à 05:26 | Vu 948 fois | 0 commentaire | Tags: en-ligne, marge, marge externe verticale, non remplacée, remplacée

La situation classique

Voici une situation qui m'est arrivée de nombreuses fois et que j'avais résolu sans jamais réaliser la cause du souci. Imaginons un conteneur contenant une image et un texte dans un span (pour le styler).On veut aligner verticalement, et finement, l'image et le texte. Instinctivement, on essaie de jouer avec les marges hautes et basses de ces 2 éléments mais...ça (ne) marche pas ! Pourquoi ?

2 familles de balise en ligne

Il existe 2 familles de balise en ligne :

• les balises remplacées : elles possèdent des dimensions (largeur et hauteur) fournies par un élément extérieur
• les balises non remplacées : elles n'ont pas de dimensions mais s'adaptent aux données qu'elles contiennent

Les balises en-ligne remplacées

Les dimensions leurs sont fournies par un élément extérieur : celles du fichier source d'une image (pour la balise img), de l'élément multimédia pour la balise object ou par le système d'exploitation (les éléments de formulaire : button, textarea, input et select ).

Marges hautes et basses

Toutes les balises en-ligne peuvent avoir des marges externes latérales à gauche et à droite. Mais, seules les balises dont on peut modifier les dimensions (balises bloc et balises en-ligne remplacées) peuvent avoir des marges hautes et basses. Donc, pas de margin-top sur un span à moins d'avoir changé sa nature d'affichage originale (attribut CSS display) de la valeur inline à la valeur block !

Références

• Replaced Elements
• Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne
• margin-top, margin-bottom

Revenir au début de l'article

Partager :

• Google
• Facebook
• Scoopeo
• Viadeo
• Linkedin
• Wikio

• Twitter
• Blogmarks
• Delicious
• Technorati
• Live
• Myspace

Autres articles:

• article précédent : Cocher une case avec le clavier
• article suivant : signes.hanploi.com

0 Commentaire:

Ajouter un commentaire