CSS
Les marges

Syntaxe

• marge: <haut et droite et bas et gauche> ;
• margin: <top> , <left & right> , <bottom> ;
• marge: <haut et bas> , <gauche et droite> ;
• margin: <top> , <right> , <bottom> , <left> ;
• margin-top: <top> ;
• margin-right: <right> ;
• margin-bottom: <bas> ;
• margin-left: <gauche> ;

Paramètres

Remarques

Appliquer la marge d'un côté donné

Propriétés spécifiques à la direction

CSS vous permet de spécifier un côté donné pour appliquer des marges. Les quatre propriétés fournies à cet effet sont les suivantes:

• margin-left
• margin-right
• margin-top
• margin-bottom

Le code suivant appliquerait une marge de 30 pixels sur le côté gauche du div sélectionné. Voir résultat

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin-left: 30px;
    height: 40px;
    width: 40px;
    background-color: red;
}

Spécification de la direction à l'aide d'une propriété raccourcie

La propriété de margin standard peut être développée pour spécifier différentes largeurs de chaque côté des éléments sélectionnés. La syntaxe pour ce faire est la suivante:

margin: <top> <right> <bottom> <left>;

L'exemple suivant applique une marge de largeur zéro au sommet du div, une marge de 10 pixels vers la droite, une marge de 50 pixels vers la gauche et une marge de 100 pixels vers la gauche. Voir résultat

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin: 0 10px 50px 100px;
    height: 40px;
    width: 40px;
    background-color: red;
}

Effondrement de la marge

Lorsque deux marges se touchent verticalement, elles sont réduites. Lorsque deux marges se touchent horizontalement, elles ne se réduisent pas.

Exemple de marges verticales adjacentes:

Considérez les styles et les balises suivants:

div{
    margin: 10px;
}

<div>
    some content
</div>
<div>
    some more content
</div>

Ils seront séparés de 10px, car les marges verticales s'effondrent sur l'une et l'autre. (L'espacement ne sera pas la somme de deux marges.)

Exemple de marges horizontales adjacentes:

Considérez les styles et les balises suivants:

span{
    margin: 10px;
}

<span>some</span><span>content</span>

Ils seront séparés de 20px, car les marges horizontales ne s'effondrent pas sur l'une et l'autre. (L'espacement sera la somme de deux marges.)

Chevauchement avec différentes tailles

.top{
    margin: 10px;
}
.bottom{
    margin: 15px;
}

<div class="top">
    some content
</div>
<div class="bottom">
    some more content
</div>

Ces éléments seront espacés de 15px à la verticale. Les marges se chevauchent autant que possible, mais la marge la plus grande détermine l'espacement entre les éléments.

Marge de chevauchement

.outer-top{
    margin: 10px;
}
.inner-top{
    margin: 15px;
}
.outer-bottom{
    margin: 20px;
}
.inner-bottom{
    margin: 25px;
}

<div class="outer-top">
    <div class="inner-top">
        some content
    </div>
</div>
<div class="outer-bottom">
    <div class="inner-bottom">
        some more content
    </div>
</div>

Quel sera l'espacement entre les deux textes? (survolez pour voir la réponse)

L'espacement sera de 25px. Comme les quatre marges se touchent, elles s’effondrent, utilisant ainsi la plus grande marge des quatre.

Maintenant, qu'en est-il si nous ajoutons des bordures au balisage ci-dessus.

div{
    border: 1px solid red;
}

Quel sera l'espacement entre les deux textes? (survolez pour voir la réponse)

L'espacement sera de 59px! Désormais, seules les marges de .outer-top et .outer-bottom se touchent et sont les seules marges réduites. Les marges restantes sont séparées par les bordures. Nous avons donc 1px + 10px + 1px + 15px + 20px + 1px + 25px + 1px. (Les 1px sont les frontières ...)

Réduire les marges entre les éléments parent et enfant:

HTML:

<h1>Title</h1>
<div>
  <p>Paragraph</p>
</div>

CSS

h1 {
  margin: 0;
  background: #cff;
}
div {
  margin: 50px 0 0 0;
  background: #cfc;
}
p {
  margin: 25px 0 0 0;
  background: #cf9;
}

Dans l'exemple ci-dessus, seule la plus grande marge s'applique. Vous vous êtes peut-être attendu à ce que le paragraphe soit situé à 60px du h1 (puisque l'élément div a une marge supérieure à 40px et que le p a une marge supérieure à 20px). Cela ne se produit pas parce que les marges s'effondrent pour former une seule marge.

Centrer horizontalement les éléments sur une page en utilisant la marge

Tant que l'élément est un bloc et qu'il a une valeur de largeur explicitement définie , les marges peuvent être utilisées pour centrer les éléments de bloc sur une page horizontalement.

Nous ajoutons une valeur de largeur inférieure à la largeur de la fenêtre et la propriété auto de la marge distribue alors l'espace restant à gauche et à droite:

#myDiv {
 width:80%;
 margin:0 auto;
}

Dans l'exemple ci - dessus , nous utilisons la sténographie margin déclaration d'abord fixer 0 aux valeurs de marge supérieure et inférieure (bien que cela puisse être une valeur) et nous utilisons auto pour laisser le navigateur allouer l'espace automatiquement aux valeurs de marge gauche et droite.

Dans l'exemple ci-dessus, l'élément #myDiv est défini sur 80% de largeur, ce qui laisse 20% de données restantes. Le navigateur distribue cette valeur aux côtés restants afin:

(100% - 80%) / 2 = 10%

Simplification de la marge

p {
    margin:1px;                /* 1px margin in all directions */
    
    /*equals to:*/
    
    margin:1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px 1px;
}

Un autre exemple:

p{
    margin:10px 15px;        /* 10px margin-top & bottom And 15px margin-right & left*/
    
    /*equals to:*/
    
    margin:10px 15px 10px 15px;
    
    /*equals to:*/
    
    margin:10px 15px 10px;
    /* margin left will be calculated from the margin right value (=15px) */
}

Marges négatives

La marge est l'une des quelques propriétés CSS pouvant être définies sur des valeurs négatives. Cette propriété peut être utilisée pour superposer des éléments sans positionnement absolu .

div{
  display: inline;
}

#over{
  margin-left: -20px;
}

<div>Base div</div>
<div id="over">Overlapping div</div>

Exemple 1:

Il est évident de supposer que la valeur en pourcentage de la marge à la margin-left et à la margin-right serait relative à son élément parent.

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px */
}

Mais ce n’est pas le cas, en ce qui concerne la margin-top et la margin-bottom . Ces deux propriétés, en pourcentage, ne sont pas relatives à la hauteur du conteneur parent mais à la largeur du conteneur parent.

Alors,

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px  */
    margin-top: 20%;   /* (parentWidth * 20/100) => 100px */
}