Les feuilles de styles CSS
DEUXIÈME PARTIE
104
Positionner les éléments en CSS
Positionner dans le flux courant
Voici le comportement et le placement spécifiques des éléments dans le flux normal :
• Les éléments de type bloc se succèdent verticalement, chaque nouveau bloc se
plaçant sous le bloc frère précédent. Les blocs occupent toute la largeur disponible
dans leur conteneur.
• Les éléments en ligne se suivent sur la même ligne, chaque nouvel élément se plaçant directement à la suite du précédent, avec retour à la ligne quand il n’y a plus
de place dans le conteneur.
Par défaut, chaque élément est donc dépendant de ses frères immédiats, et deux
paragraphes
DEUXIÈME PARTIE
104
Positionner les éléments en CSS
Positionner dans le flux courant
Voici le comportement et le placement spécifiques des éléments dans le flux normal :
• Les éléments de type bloc se succèdent verticalement, chaque nouveau bloc se
plaçant sous le bloc frère précédent. Les blocs occupent toute la largeur disponible
dans leur conteneur.
• Les éléments en ligne se suivent sur la même ligne, chaque nouvel élément se plaçant directement à la suite du précédent, avec retour à la ligne quand il n’y a plus
de place dans le conteneur.
Par défaut, chaque élément est donc dépendant de ses frères immédiats, et deux
paragraphes
successifs apparaissent l’un sous l’autre.
Cette méthode, appelée positionnement dans le flux courant, convient à la majorité
des cas : il suffit simplement de définir les marges de chaque élément pour le placer
dans son conteneur.
Examinons le cas d’un paragraphe contenu dans un bloc
:
Attribuons des couleurs de fond différentes au conteneur et au paragraphe pour
mieux les distinguer (figure 7-4) :
Le
Attribuons des couleurs de fond différentes au conteneur et au paragraphe pour
mieux les distinguer (figure 7-4) :
Le
conteneur jaune n’est pas visible ; seul le paragraphe vert apparaît. Il occupe
toute la largeur disponible, c’est-à-dire la largeur du document.
C’est un comportement logique : l’élément bloc
toute la largeur disponible, c’est-à-dire la largeur du document.
C’est un comportement logique : l’élément bloc
, sans spécification de taille,
occupe toute la largeur possible dans une hauteur par défaut nulle. L’élément bloc
div {
background: yellow;
}
p {
background: green;
}
Figure 7–4
Positionnement
dans le flux (I)
occupe toute la largeur possible dans une hauteur par défaut nulle. L’élément bloc
, sans spécification de taille, occupe lui aussi toute la largeur de son conteneur, le
paragraphe de texte
div {
background: yellow;
}
p {
background: green;
}
Figure 7–4
Positionnement
dans le flux (I)