Propriété CSS margin-top
Baseline
Large disponibilité
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
La propriété CSS margin-top définit la zone de marge en haut d'un élément. Une valeur positive l'éloigne de ses voisins, tandis qu'une valeur négative la rapproche.
Cette propriété n'a aucun effet sur les éléments en incise (inline en anglais) qui ne sont pas remplacés, tels que <span> ou <code>.
Exemple interactif
margin-top: 1em;
margin-top: 10%;
margin-top: 10px;
margin-top: 0;
<section id="default-example">
<div id="container">
<div class="row"></div>
<div class="row transition-all" id="example-element"></div>
<div class="row"></div>
</div>
</section>
#container {
width: 300px;
height: 200px;
display: flex;
align-content: flex-start;
flex-direction: column;
justify-content: flex-start;
}
.row {
height: 33.33%;
display: inline-block;
border: solid #ce7777 10px;
background-color: #2b3a55;
flex-shrink: 0;
}
#example-element {
border: solid 10px #ffbf00;
background-color: #2b3a55;
}
Syntaxe
/* Valeurs de type <length> */
margin-top: 10px; /* Une longueur absolue */
margin-top: 1em; /* Une longueur proportionnelle à la taille du texte */
margin-top: 5%; /* Une marge relative à la largeur du bloc englobant le plus proche */
margin-top: anchor-size(height);
margin-top: calc(anchor-size(--my-anchor self-inline, 25px) / 4);
/* Valeur avec un mot-clé */
margin-top: auto;
/* Valeurs globales */
margin-top: inherit;
margin-top: initial;
margin-top: revert;
margin-top: revert-layer;
margin-top: unset;
La propriété margin-top peut être définie avec le mot-clé auto, une valeur de type longueur (<length>) ou pourcentage (<percentage>). Sa valeur peut être positive, nulle ou négative.
Valeurs
<length>-
La taille de la marge en valeur fixe.
- Pour les éléments positionnés par une ancre, la fonction
anchor-size()donne une valeur<length>relative à la largeur ou la hauteur de l'élément ancre associé (voir Définir la marge d'un élément selon la taille de l'ancre).
- Pour les éléments positionnés par une ancre, la fonction
<percentage>-
La taille de la marge en pourcentage, relative à la taille en incise (largeur dans une langue horizontale, définie par
writing-mode) du bloc englobant. auto-
Le navigateur choisit une valeur adaptée. Voir
margin.
Définition formelle
| Valeur initiale | 0 |
|---|---|
| Applicabilité | tous les éléments exceptés ceux dont les types display pour les tableaux ne sont pas table-caption, table et inline-table. S'applique aussi à ::first-letter. |
| Héritée | non |
| Pourcentages | se rapporte à la largeur du bloc contenant |
| Valeur calculée | le pourcentage tel que défini ou une longueur absolue |
| Type d'animation | une longueur |
Syntaxe formelle
margin-top =
<length-percentage> |
auto |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
Exemples
Définir des marges hautes positives et négatives
.content {
margin-top: 5%;
}
.side-box {
margin-top: 10px;
}
.logo {
margin-top: -5px;
}
#footer {
margin-top: 1em;
}
Spécifications
| Spécification |
|---|
| CSS Box Model Module Level 3 # margin-physical |
Compatibilité des navigateurs
Voir aussi
- Les propriétés
margin-right,margin-bottometmargin-left - La propriété raccourcie
margin - Les propriétés
margin-block-start,margin-block-end,margin-inline-startetmargin-inline-end - Les propriétés raccourcies
margin-blocketmargin-inline - Le module du modèle de boîte CSS