Mise en page CSS - affichage : bloc en ligne
L'affichage : valeur du bloc en ligne
Par rapport à display: inline, la différence majeure est qu'il display: inline-blockpermet de définir une largeur et une hauteur sur l'élément.
De plus, avec
display: inline-block, les marges/remplissages haut et bas sont respectés, mais avec display: inlineils ne le sont pas.
Par rapport à display: block, la principale différence est qu'il display: inline-blockn'ajoute pas de saut de ligne après l'élément, de sorte que l'élément peut s'asseoir à côté d'autres éléments.
L'exemple suivant montre le comportement différent de display: inline, display: inline-block
et display: block:
Exemple
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display:
inline-block;
width: 100px;
height:
100px;
padding: 5px;
border: 1px
solid blue;
background-color: yellow;
}
span.c {
display: block;
width:
100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
Utilisation d'un bloc en ligne pour créer des liens de navigation
Une utilisation courante de display: inline-block
est d'afficher les éléments de la liste horizontalement au lieu de verticalement. L'exemple suivant crée des liens de navigation horizontaux :
Exemple
.nav {
background-color: yellow;
list-style-type: none;
text-align:
center;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding:
20px;
}