Les
marges
Marges extérieures (margin) et
intérieures (padding)
Les propriétés de marge ne sont pas
hérités.
Les marges intérieures : padding
Elles déterminent l'espacement entre le bord de la
boite de
l'élément et son contenu.
- padding-top : marge intérieure haut
- padding-right : marge intérieure droite
- padding-bottom : marge intérieure bas
- padding-left : marge intérieure gauche
Lorsqu'on modifie les marges intérieures les
dimensions de
l'élément changent. Les conséquences
de ce redimensionnement sur le
positionnement des élements suivants varie
selon qu'il s'agisse d'un élément de bloc ou d'un
élément incorporé.
Les marges intérieures ne sont pas
héritées
Eléments de bloc
Elément
de bloc temoin avec des marges intérieures et
extérieures fixées à 0px :
Elément
de bloc suivant dont on observe le positionnement par rapport
à
l'élément témoin
Elément de bloc témoin avec des marges
intérieures fixées à 20px :
Elément
de bloc suivant dont on observe le positionnement par rapport
à
l'élément témoin
Conclusion
: lorsque des marges intérieures sont appliquées
à un élément de bloc,
les éléments suivants sont
repositionnés de sorte à prendre en compte
le changement de dimension de l'élément.
Eléments incorporés
Elément de bloc contenant l'
Elément
temoin - padding:0px; et du texte
qui peut s'étendre sur plusieurs lignes. ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ...
Elément
de bloc suivant dont on observe le positionnement par rapport
à
l'élément témoin
Elément
de bloc
contenant l'Elément
temoin - padding-left:50px; padding-right:50pxet du
texte
qui peut s'étendre sur plusieurs lignes. ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ...
Elément
de bloc suivant dont on observe le positionnement par rapport
à
l'élément témoin
Elément
de bloc
contenant l'Elément
temoin - padding-top:20px; padding-bottom:20px et du
texte
qui peut s'étendre sur plusieurs lignes. ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ...
Elément
de bloc suivant dont on observe le positionnement par rapport
à
l'élément témoin
Elément
de bloc
contenant l'Elément
temoin - padding-top:20px; padding-bottom:20px; padding-left:50px;
padding-right:50px;et du
texte
qui peut s'étendre sur plusieurs lignes. ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ...
... ...
Elément
de bloc suivant dont on observe le positionnement par rapport
à
l'élément témoin
Conclusion
: lorsque des marges intérieures sont appliquées
à un élément
incorporé, l'élément
incorporé suivant subit un décalage horizontal,
mais maitient sa position verticale. La position de
l'élément de bloc
suivant reste inchangée.
Les marges extérieures : margin
Elles déterminent l'espacement entre le bord de la
boite de
l'élément et celui des boites
précédentes, suivante ou parente selon le
contexte. Les marges peuvent prendre des valeurs négatives.
- margin-top : marge extérieure haut
- margin-right : marge extérieur droite
- margin-bottom : marge extérieur bas
- margin-left : marge extérieur gauche
Eléments de bloc
marges verticales positives :
L'espacement vertical entre deux
éléments de bloc consécutifs
est déterminé par la
propriété "margin-bottom" du premier
élément et la
propriété margin-top du second
élément.
premier
élément : margin-bottom : 0px
second
élément : margin-top : 0px
premier
élément : margin-bottom : 30px
second
élément : margin-top : 0px
premier
élément : margin-bottom : 30px
second
élément : margin-top : 20px
premier
élément : margin-bottom : 30px
second
élément : margin-top : 50px
conclusion : l'espacement
vertical entre deux blocs consécutifs dont les marges
adjacentes sont positives :
espacement =
maximum
(margin-bottom de l'élément1, margin-top de
l'élément 2.
marges verticales négatives :
premier
élément : margin-bottom : 0px
second
élément : margin-top : 0px
premier
élément : margin-bottom : -50px
second
élément : margin-top : 0px
premier
élément : margin-bottom : -50px
second
élément : margin-top : -30px
premier
élément : margin-bottom : -50px
second
élément : margin-top : -80px
conclusion : l'espacement
vertical entre deux blocs consécutifs dont les marges
adjacentes sont négatives :
espacement
= minimum
(margin-bottom de l'élément1, margin-top de
l'élément 2.
marges verticales de signe
opposé
:
premier
élément : margin-bottom : 50px
second
élément : margin-top : -30px
premier
élément : margin-bottom : -30px
second
élément : margin-top : 50px
conclusion
: l'espacement
vertical entre deux blocs consécutifs dont les marges
adjacentes sont de signe opposé
:
espacement
= margin-bottom de l'élément1 +
margin-top de l'élément 2.
marges horizontales
Sauf dans le cas d'élements flottants, les
éléments de bloc
n'ont ni prédécesseur à gauche, ni
successeur à droite, ces derniers
étant respectivement au dessus et en dessous.
Les marges horizontales sont donc définies par
rapport à
l'élément de bloc parent.
Elément
parent
avec
un des marges intérieures de 30px;
Elément
enfant avec une marge exterieure gauche et droite de 20px
Elément
parent
avec
un des marges intérieures de 30px;
Elément
enfant avec une marge exterieure gauche et droite de -20px
conclusion
: l'espacement horizontal entre un
élément de
bloc et sont parent :
espacement
à gauche
= padding-left de l'élément parent + margin-left
de l'élément enfant
espacement
à droite
= padding-right de l'élément parent +
margin-right de l'élément enfant
marges horizontales
pour des éléments
flottants à gauche
float:left;
margin : 0px;
float:left;
margin : 0px;
float:left;
margin : 0px;
float:left; margin-left
: 20px;
float:left; margin-left
: 20px;
float:left; margin-left : 20px;
float:left;
margin-left:20px; margin-right:20px;
float:left; margin-left
: 20px; margin-right:20px;
float:left; -
margin-left : 20px; margin-right:20px;
float:left;
margin-left:20px; margin-right:-20px;
float:left; margin-left
: 20px; margin-right:-20px;
float:left; -
margin-left : 20px; margin-right:-20px;
float:left;
margin-left:20px; margin-right:-40px;
float:left; margin-left
: 20px; margin-right:-40px;
float:left; -
margin-left : 20px; margin-right:-40px;
conclusion
: l'espacement entre deux
éléments flottants à
gauche :
espacement =
margin-right de l'élément de gauche + margin-left
de l'élément suivant
situé à
droite
la marge
gauche du premier élément flottant à
gauche détermine sa position par
rapport à l'élément parent
marges horizontales pour des éléments
flottants à droite
float:right;
margin : 0px;
float:right;
margin : 0px;
float:right;
margin : 0px;
float:right; margin-left
: 20px;
float:right; margin-left
: 20px;
float:right; margin-left : 20px;
float:right;
margin-left:20px; margin-right:20px;
float:right; margin-left
: 20px; margin-right:20px;
float:right; -
margin-left : 20px; margin-right:20px;
float:right;
margin-left:20px; margin-right:-20px;
float:right; margin-left
: 20px; margin-right:-20px;
float:right; -
margin-left : 20px; margin-right:-20px;
float:right;
margin-left:20px; margin-right:-40px;
float:right; margin-left
: 20px; margin-right:-40px;
float:right; -
margin-left : 20px; margin-right:-40px;
conclusion
: l'espacement entre deux
éléments flottants à
droite :
espacement =
margin-right de l'élément de gauche + margin-left
de l'élément situé à
droite qui est le prédécesseur de
l'élément situé à gauche
la marge
droite du dernier élément flottant à
droite contraint sa position par
rapport à l'élément parent
Eléments incorporés
Elément de bloc avec un
élément incorporé - margin:0px;
et un
autre élément incorporé - margin:0px;
en son
sein
Element
de bloc suivant - margin : 0px;
Elément de bloc avec un
élément incorporé - margin:20px;
et un
autre élément incorporé - margin:30px;
en son
sein
Element
de bloc suivant - margin : 0px;
Elément de bloc avec un
élément incorporé - margin:20px;
et
un
autre élément incorporé - margin:-30px;
Element
de bloc suivant - margin : 0px;
conclusion
:
l'espacement
horizontal entre deux éléments
incorporés consécutif =
margin-right de l'élément de gauche +
margin-left de
l'élément suivant
les marges
verticales ne s'appliquent pas aux éléments
incorporés
les marges extérieures ne sont pas
héritées
Regroupement des déclarations
margin
Les propriétés margin-top, margin-right, margin
bottom,
margin-left peuvent être regroupées en une selon
déclaration margin
Ainsi margin:20px; est équivalent aux quatre
déclarations :
- margin-top:20px;
- margin-right:20px;
- margin-bottom:20px;
- margin-left:20px;
Une ou plusieurs valeurs peuvent être
précisées. Les marges
s'appliquent alors selon les règles suivantes
|
margin-top |
margin-right |
margin-bottom |
margin-left |
| margin:marg1; |
marg1 |
marg1 |
marg1 |
marg1 |
| margin:marg1 marg2 |
marg1 |
marg2 |
marg1 |
marg2 |
| margin:marg1 marg2 marg3 |
marg1 |
marg2 |
marg3 |
marg2 |
| margin:marg1 marg2 marg3 marg4 |
marg1 |
marg2 |
marg3 |
marg4 |
padding
Le regroupement des propriétés des
marges intérieures
(padding)
suit les mêmes règles que celles des
propriétés des marges extérieures
(margin) décrites ci-dessus.
