La marginpropriété définit la partie la plus externe du modèle de boîte, créant un espace autour d'un élément, en dehors des bordures définies.
Les marges sont définies à l'aide de longueurs, de pourcentages ou du mot-clé autoet peuvent avoir des valeurs négatives. Voici un exemple:
.box ( margin: 0 3em 0 3em; )margin est une propriété abrégée et accepte jusqu'à quatre valeurs, illustrées ici:
.box ( margin: || || || )Si moins de quatre valeurs sont définies, les valeurs manquantes sont supposées en fonction de celles définies. Par exemple, les deux ensembles de règles suivants obtiendraient des résultats identiques:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Ainsi, si une seule valeur est définie, cela définit les quatre marges sur la même valeur. Si trois valeurs sont déclarées, c'est le cas margin: (top) (left-and-right) (bottom);.
Chacune des marges individuelles peut être déclarée à l'aide de la longue main, auquel cas vous ne définiriez qu'une seule valeur par propriété:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto et centrage
Chacune des propriétés de marge peut également accepter une valeur de auto. Une valeur de autoindique essentiellement au navigateur de définir la marge pour vous. Dans la plupart des cas, une valeur de autosera équivalente à une valeur de 0(qui est la valeur initiale de chaque propriété de marge) ou bien quel que soit l'espace disponible de ce côté de l'élément. Cependant, autoest pratique pour le centrage horizontal:
.container ( width: 980px; margin: 0 auto; )Dans cet exemple, deux choses sont effectuées pour centrer cet élément horizontalement dans l'espace disponible:
- L'élément a une largeur spécifiée
- Les marges gauche et droite sont définies sur
auto
Sans la largeur spécifiée, les autovaleurs n'auraient essentiellement aucun effet, définissant les marges gauche et droite sur 0ou bien sur tout ce qui est l'espace disponible à l'intérieur de l'élément parent.
Il convient également de souligner que ce auton'est utile que pour le centrage horizontal, et donc l'utilisation autopour les marges supérieure et inférieure ne centrera pas un élément verticalement, ce qui peut être déroutant pour les débutants.
Réduire les marges
Les marges verticales sur différents éléments qui se touchent (donc sans contenu, remplissage ou bordures les séparant) s'effondreront, formant une seule marge égale à la plus grande des marges adjacentes. Cela ne se produit pas sur les marges horizontales (gauche et droite), uniquement verticales (haut et bas).
Pour illustrer, prenez le code HTML suivant:
Collapsing Margins
Example text.Et le CSS suivant:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )Dans cet exemple, l' h2élément a une marge inférieure de 20 px. L'élément de paragraphe, qui le suit immédiatement dans la source, a une marge supérieure définie à 10 px.
Le bon sens semble suggérer que l'épaisseur de la marge verticale entre le h2et le paragraphe serait un total de 30 px (20 px + 10 px). Mais en raison de l'effondrement des marges, l'épaisseur réelle finit par être de 20 px. Ceci est démontré dans le stylo intégré ci-dessous:
Bien que la réduction des marges puisse sembler peu intuitive à première vue, elles sont en fait utiles pour plusieurs raisons. Premièrement, ils empêchent les éléments vides d'ajouter un espace de marge verticale supplémentaire, généralement indésirable.
Deuxièmement, ils permettent une approche plus cohérente de la déclaration de marges universelles entre les éléments de la page. Par exemple, les titres ont généralement un espace de marge verticale, tout comme les paragraphes. Si les marges ne se réduisaient pas, les en-têtes qui suivent les paragraphes (ou vice-versa) nécessiteraient souvent de réinitialiser les marges sur l'un des éléments afin d'obtenir un espacement vertical cohérent.
Troisièmement, la réduction des marges s'applique également aux éléments imbriqués. Regardez le stylo suivant:
Ici, l'élément de paragraphe a une marge supérieure définie à 30 pixels et est imbriqué à l'intérieur d'un divélément avec une marge supérieure de 40 pixels. De plus, l' h2élément a une marge inférieure de 20 px.
Encore une fois, le bon sens suggérerait que l'espace total de la marge verticale ici serait de 90px (20px + 40px + 30px), mais au lieu de cela, les marges se réduisent toutes en une seule marge de 40px (la plus élevée des trois). Ceci est utile dans la plupart des cas, car il n'est pas nécessaire de redéfinir l'une des marges supérieures pour supprimer l'espace vertical supplémentaire.
Marges négatives
Comme vous pouvez vous en douter, alors qu'une valeur de marge positive repousse les autres éléments, une marge négative tirera l'élément lui-même dans cette direction ou attirera d'autres éléments vers lui.
Voici un exemple de conteneur avec remplissage, et l'en-tête h2 a des marges négatives qui se tirent à travers ce remplissage vers les bords:
Consultez le
cas d'utilisation
le plus courant du stylet pour les marges négatives par Chris Coyier (@chriscoyier) sur CodePen.
Voici un exemple où le premier paragraphe a une marge inférieure négative, ce qui rapproche le paragraphe suivant.
Voir le
paragraphe du bas tirant de la marge négative du stylo par Chris Coyier (@chriscoyier)
sur CodePen.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Travaux | Travaux | Travaux | Travaux | Travaux | Travaux | Travaux |
IE6 est sujet au bogue de la marge flottante doublée, qui peut être résolu dans la plupart des cas en ajoutant display: inlineà l'élément flottant.