Qu'est-ce que les margin et les padding ?
Les propriétés CSS margin et padding permettent de définir l'espacement entre chaque block HTML :
- les margin définissent les marges extérieures
- les padding définissent les marges intérieures
Pour chaque propriété, 4 marges peuvent être modifiées comme vous pouvez le voir sur le schéma ci-dessous :
Ces marges peuvent prendre des valeurs en px, pt, em ou encore %.
Définition des marges dans un CSS
Il existe plusieurs façon pour définir les marges d'un block dans un CSS en fonction de ce que vous recherchez à faire :
-> Si vous souhaitez que toutes les marges fassent la même taille
Toutes les marges font 5 pixels
-> Si vous souhaitez que les marges verticales et horizontales soient identiques entre elles (haut=bas, droite=gauche)
|
|
|
|
.block
{
margin : 5px 10px;
} |
|
|
|
|
|
OU |
|
|
|
|
.block
{
padding : 5px 10px;
} |
|
|
|
|
|
Les marges verticlales font 5px et les marges horizontales font 10 pixels.
-> Si vous souhaitez que toutes les marges soient différentes
|
|
|
|
.block
{
margin-top : 5px
margin-right : 10px
margin-bottom : 3px
margin-left : 7px
} |
|
|
|
|
|
OU |
|
|
|
|
.block
{
padding-top : 5px
padding-right : 10px
padding-bottom : 3px
padding-left : 7px
} |
|
|
|
|
|
| = |
|
= |
|
|
|
|
.block
{
margin : 5px 10px 3px 7px;
/*haut droite bas gauche*/
} |
|
|
|
|
|
OU |
|
|
|
|
.block
{
padding : 5px 10px 3px 7px;
/*haut droite bas gauche*/
} |
|
|
|
|
|
La marge haute fait 5 pixels, la marge droite 10 pixels, la marge basse 3 pixels et la marge gauche 7 pixels.
Centrer horizontalement un block
Il vous est possible de centrer horizontalement un block. Il faut pour cela renseigner la valeur auto pour les marges extérieures horizontales :
|
|
|
|
.block
{
width : 100px;
margin: auto;
} |
|
|
|
|
|
| = |
|
|
|
|
.block
{
width : 100px;
margin : 0 auto;
} |
|
|
|
|
|
|
| = |
|
|
|
|
.block
{
width : 100px;
margin-left : auto;
margin-right : auto;
} |
|
|
|
|
|
|
 | Pour que cela fonctionne correctement, il est préférable de renseigner la taille du block. |
