Derniers tutoriels de développement web
 

CSS marges

❮ Précédent Suivant Chapitre ❯

CSS Margin Propriétés

Les CSS margin propriétés sont utilisées pour générer l' espace autour des éléments.

Les margin propriétés définissent la taille de l'espace blanc OUTSIDE la frontière.

Cet élément a une margin de 80px.

CSS Margins

Les CSS margin propriétés définissent la taille de l'espace blanc OUTSIDE la frontière.

RemarqueRemarque: Les margins sont totalement transparentes - et ne peut pas avoir une couleur de fond!

Avec CSS, vous avez le plein contrôle sur les margins . Il y a des propriétés CSS pour le réglage de la margin pour chaque côté d'un élément ( en haut, à droite, en bas et à gauche).

Margin - Sides individuels

CSS a des propriétés pour spécifier la margin de chaque côté d'un élément:

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

Toutes les margin propriétés peuvent avoir les valeurs suivantes:

  • auto - le navigateur calcule la margin
  • longueur - spécifie une margin en px, pt, cm , etc.
  • % - Spécifie une margin en% de la largeur de l'élément contenant
  • hériteront - spécifie que la margin devrait être héritée de l'élément parent
RemarqueNote: Il est également possible d'utiliser des valeurs négatives pour les margins ;pour chevaucher le contenu.

L'exemple suivant définit différentes margins pour les quatre côtés d'un <p> élément:

Exemple

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
Essayez - le vous - même »

L'exemple suivant permet la gauche margin être héritée de l'élément parent:

Exemple

div.container {
    border: 1px solid red;
    margin-left: 100px;
}

p.one {
    margin-left: inherit;
}
Essayez - le vous - même »

Margin - Propriété Shorthand

Pour raccourcir le code, il est possible de spécifier toutes les margin des propriétés dans une propriété.

La margin propriété est un raccourci pour les individuels suivants margin propriétés:

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

Exemple

p {
    margin: 100px 150px 100px 80px;
}
Essayez - le vous - même »

Alors, voici comment cela fonctionne:

Si la margin propriété dispose de quatre valeurs:

  • margin : 25px 50px 75px 100px;
    • marge supérieure est 25px
    • marge de droite est 50px
    • marge du bas est 75px
    • marge de gauche est 100px

Si la margin de propriété a trois valeurs:

  • margin : 25px 50px 75px;
    • marge supérieure est 25px
    • les marges droite et gauche sont 50px
    • marge du bas est 75px

Si la margin de propriété a deux valeurs:

  • margin : 25px 50px;
    • marges supérieure et inférieure sont 25px
    • les marges droite et gauche sont 50px

Si la margin de propriété a une valeur:

  • margin : 25px;
    • les quatre marges sont 25px

Utilisation de la valeur de l'automobile

Vous pouvez définir la margin propriété pour auto pour centrer horizontalement l'élément dans son conteneur.

L'élément prendra alors la largeur spécifiée, et l'espace restant sera divisé à parts égales entre gauche et droite margins :

Exemple

div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}
Essayez - le vous - même »

Testez-vous avec des exercices!

Exercice 1 » Exercice 2» Exercice 3 » Exercice 4»

Toutes les propriétés de marge CSS

Propriété La description
margin Un raccourci pour définir les margin des propriétés dans une déclaration
margin-bottom Définit le fond margin d'un élément
margin-left Définit la gauche margin d'un élément
margin-right Définit le droit margin d'un élément
margin-top Définit le top margin d'un élément

❮ Précédent Suivant Chapitre ❯