Les marges en CSS

Propriétés margin et padding

Les différentes propriétés :


Margin :

      margin-top
      margin-bottom
      margin-right
      marging-left

Padding :

      padding-top
      padding-bottom
      padding-right
      padding-left
Schéma des margin padding

Exemples:


<p style="margin: 50px;">Lorem ipsum dolor sit amet.</p>

Lorem ipsum dolor sit amet.


<p style="padding: 50px;">Debitis magni at atque quo.</p>

Debitis magni at atque quo.

<p style="margin: 50px; padding: 50px;" >Minus omnis enim maiores aperiam.</p>

Minus omnis enim maiores aperiam.


<p style="padding-top : 50px;">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

<p style="margin: 100px 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, nihil.</p>

Quand il y a 4 valeurs, c'est 4 valeurs = haut droite bas gauche

<p style="margin: 20px 10px 0 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, nihil.</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, nihil.


Quand il y a 3 valeurs, c'est 3 valeurs = haut gauche/ droite bas


<p style="margin: 20px 50px 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, nihil.</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, nihil.

Quand il y a 2 valeurs, c'est 2 valeurs = haut bas/ droite gauche


<p style="margin: 20px 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, nihil.</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, nihil.