Block vs Inline
C’est à cause des différents display comportements : Block ou inline. Voyons la différence à l’aide d’un petit exemple. Sans aucune CSS, je crée un modèle HTML avec les balises <p> et <span> :
<body>
<p>I'm a paragraph</p>
<p>I'm a paragraph too</p>
<span>I'm a word</span>
<span>I'm a word too.</span>
</body>
Voyez-vous la différence ? Chaque balise <p> commence par une nouvelle ligne même si l’espace est suffisant. Les Span s’affichent cependant côte à côte.
Chaque élément HTML possède une valeur d’affichage par défaut. – W3
Par défaut, les éléments HTML ont un comportement d’affichage en bloc ou en ligne. Les éléments qui commencent chacun par une nouvelle ligne (les balises <p> dans cet exemple) sont appelés éléments de niveau bloc, et les autres (<span>) qui peuvent être placés côte à côte sont des éléments en ligne.
Il existe quelques caractéristiques différentes entre les éléments de niveau bloc et les éléments en ligne :
Éléments de niveau bloc
- Prendront la pleine…largeur (100% de la largeur) par défaut
- Chacun s’affiche sur une nouvelle ligne
- La largeur & les propriétés de hauteur peuvent être définies
- Peut contenir d’autres éléments de niveau bloc ou inline
Puisque les balises <p> sont des éléments de niveau bloc, les propriétés de largeur & hauteur peuvent être définies :
p {
height: 100px;
width: 100px;
background: red;
color: white;
}
Si aucune largeur n’était déclarée ici, alors la largeur par défaut de <p> serait de 100%. Cependant, j’ai déclaré une largeur de 100px et l’élément suivant <p> commence toujours par une nouvelle ligne :
Inline elements
- Take only as much of space as they need
- Displayed side by side
- Don’t accept width or height properties, et la marge haut-bas
- Peut être un parent d’autres éléments en ligne
Nous pouvons changer le comportement d’affichage des éléments. Changeons donc le comportement d’affichage de la balise <p> en inline :
p {
height: 100px;
width: 100px;
background: red;
color: white;
display: inline;
}
Puisque notre balise <p> est maintenant un élément inline, ils seront placés côte à côte et les propriétés de largeur & hauteur n’ont plus d’effet :
balise en tant qu’élément en ligne
Voir une liste complète des balises HTML en tant qu’éléments en ligne du bloc &.