) possèdent par défaut des marges internes
et externes.
Les deux frères sont ici séparés par la marge inférieure (margin-bottom) du premier
paragraphe. En lui précisant une marge inférieure nulle (margin-bottom: 0), on
obtiendra l’effet recherché :
Le positionnement relatif
C’est une variante du positionnement dans le flux courant, qu’on active par la déclaration position: relative;. L’élément concerné est alors dit « positionné », et
prend d’abord sa place dans le flux courant. Il peut ensuite s’en décaler à l’aide des
propriétés top, right, bottom et left.
Reprenons l’exemple précédent en recourant au positionnement relatif pour décaler
le second paragraphe de sa position normale dans le flux. Pour le pousser de 20 px à
droite et de 15 px vers le haut, on lui spécifie d’abord position: relative puis les
mouvements left: 20px et bottom: 15px (figure 7-9) :
Figure 7–8
Positionnement
dans le flux (V)
p#premier {
margin-bottom: 0;
margin-top: 0px;
margin-left: 3em;
width: 100px;
background: orange;
}
p#second {
position: relative;
left: 20px;
bottom: 15px;
margin-top: 0;
margin-left: 3em;