Mise en page CSS – bloc en ligne
L’affichage : valeur du bloc en ligne
Par rapport à display: inlinela principale différence est que display: inline-block permet de définir une largeur et une hauteur sur l’élément.
Aussi, avec
display: inline-blockdisplay: inline ils ne sont pas.
Par rapport à display: blockla principale différence est que display: inline-block n’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 {
affichage : en ligne ; /* la valeur par défaut pour span */
largeur : 100 pixels ;
hauteur : 100px ;
rembourrage : 5px ;
bordure : 1 pixel bleu uni ;
couleur de fond : jaune ;
}
span.b {
affichage : bloc en ligne ;
largeur : 100 pixels ;
hauteur : 100px ;
rembourrage : 5px ;
bordure : 1 pixel bleu uni ;
couleur de fond : jaune ;
}
span.c {
bloc de visualisation;
largeur : 100 pixels ;
hauteur : 100px ;
rembourrage : 5px ;
bordure : 1 pixel bleu uni ;
couleur de fond : jaune ;
}
Essayez-le vous-même »
Utilisation d’un bloc en ligne pour créer des liens de navigation
Une utilisation courante pour 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 {
couleur de fond : jaune ;
type de style de liste : aucun ;
aligner le texte : centrer ;
rembourrage : 0 ;
marge : 0 ;
}
.nav li {
affichage : bloc en ligne ;
taille de police : 20 px ;
rembourrage : 20px ;
}
Essayez-le vous-même »
#Mise #page #CSS #bloc #ligne