Les feuilles de styles CSS
DEUXIÈME PARTIE
106
Voilà qui suffit à positionner le bloc paragraphe dans son conteneur. Toute autre
méthode de spécification de longueur que les unités em conviendrait parfaitement :
pixel, pourcentage, etc.
Ajoutons un deuxième paragraphe de texte pour en observer le positionnement dans
le flux :
Ces deux frères prennent par défaut place l’un sous l’autre, en respectant tous deux
les styles CSS associés au sélecteur de paragraphe (

) : chacun adopte une marge à
gauche de trois caractères (figure 7-7).
Quelques modifications des dimensions, marges et couleurs produisent la figure 7-8.

Figure 7–7
Positionnement
dans le flux (IV)
div {
width: 300px;
padding-top: 10px;
background: yellow;
}
p#premier {
margin-top: 0;
margin-left: 3em;
width: 100px;
background: orange;
}
p#second {
margin-top: 0;
margin-left: 2em;
width: 150px;
background: green;
}