Margin & Padding
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

.block
{
margin : 5px;
}
OU
.block
{
padding : 5px;
}

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.