Les Marges en CSS

Les Marges en CSS

  1. Objectif

    • Connaitre les propriétés de l’élément Margin



  2. Définitions

    • Pour affecter des marges aux différents éléments d’une page web, les propriétés CSS à utiliser sont margin, pour les marges extérieures, et padding pour les marges intérieures.
    • Pour chaque élément html on peut donc définir l’espacement qui le séparera des autres éléments avec margin et les espacements intérieurs dont il peut bénéficier avec padding .
    • Les Marges CSS

  3. Les marges externes avec margin

    • Les Marges en CSS

    • Les propriétés de marge spécifient la largeur de la zone de marge d’un bloc.
    • Définit la marge pour les quatre côtés de la zone de marge d’un bloc.
    • La “marge externe” est la zone “margin”. D’où le nom de la propriété : margin.
    1. Déclaration des tailles
      • La propriété : margin spécifie la marge pour les quatre côtés à la fois.
        • Définir une largeur fixe.
        • Utiliser l’unité pourcentage: Dans ce cas le pourcentage est calculé par rapport à la taille du bloc conteneur.
        • Mettre auto qui correspond à une valeur automatique définie par le navigateur.

        Si on ne spécifie qu’une valeur dans la propriété margin, celle-ci s’applique à tous les côtés.

    2. Les propriétés de margin
      • margin-top : marge extérieure en haut
      • margin-bottom : marge extérieure en bas
      • margin-left : marge extérieure à gauche
      • margin-right : marge extérieure à droite
      • Si on écrit : margin:2px 5px 2em 0;
      • revient à :
      • margin-top:2px;
        margin-right:5px;
        margin-bottom:2em;
        margin-left:0;

  4. Les marges internes avec padding

    • Le principe reste le même qu’à la place de margin, on utilise padding.
    • Le padding est une zone, appelée aussi “marge interne” ou “intervalle“.
    • Elle est utilisée pour définir une distance entre le contenu d’une boîte et la bordure utilisée.
    1. Les propriétés de padding
      • padding-top : marge intérieure en haut
      • padding-bottom : marge intérieure en bas
      • padding-left : marge intérieure à gauche
      • padding-right : marge intérieure à droite
    2. Exemple
      • Si on écrit: { padding:10px 50px 40px 20px; }
      • est équivalent à: { padding-top:10px; padding-right:50px; padding-bottom:40px; padding-left:20px; }
      • Si on met deux valeurs, la 1ère s’appliquera au haut et au bas, la seconde à droite et à gauche.
      • padding:2px 5px;

      • revient à :
      • padding-top:2px;
        padding-bottom:2px;
        padding-right:5px
        padding-left:5px;




Abonnez vous à notre chaîne YouTube gratuitement