margin-top |
Marge du haut |
CSS |
|
Syntaxe
Paramètres
Paramètre |
Description |
paramètres |
Ce paramètre de propriété permet d'indiquer la marge du haut : |
auto |
Cet attribut permet d'indiquer que la marge est calculé automatiquement. |
distance |
Cet attribut permet d'indiquer que la marge calculé en pixels. La valeur par défaut est 0. |
pourcentage% |
Cet attribut permet d'indiquer que l'espacement est calculé en fonction du pourcentage de la hauteur du document. |
Description
Cette propriété permet de définir la bordure supérieur entre la fenêtre de navigateur et la page HTML.
Remarques
- Définition et rôle : La propriété margin-top permet de définir la marge supérieure d'un élément, c'est-à-dire l'espace entre cet élément et l'élément le
précédant. Elle peut être exprimée en différentes unités de mesure, comme les pixels (px), les pourcentages (%), les rems (rem), ou encore les ems (em), ce qui permet une grande
flexibilité dans la mise en page.
- Impact sur le modèle de boîte : La marge, y compris margin-top, fait partie du modèle de boîte en CSS. Elle n'affecte pas la taille de l'élément
lui-même, mais ajoute de l'espace autour de lui, ce qui influence la disposition des autres éléments dans la page.
- Héritage et spécificité : Contrairement aux propriétés comme color ou font-size, margin-top n'est pas héritée des éléments parents. Cela
signifie que chaque élément doit avoir ses marges définies indépendamment de son contexte ou de son parent, sauf si l'on utilise des techniques comme les sélecteurs descendants
ou l'héritage implicite.
- Comportement avec les marges adjacentes : Dans certains cas, les marges verticales de deux éléments consécutifs (l'un ayant une marge supérieure et l'autre une
marge inférieure) se "fusionnent". Cette fusion des marges (aussi appelée "collapsing margins") peut entraîner un espacement moindre que prévu entre ces éléments, ce qui
doit être pris en compte lors de la mise en page.
- Utilisation avec flexbox et grid : La propriété margin-top fonctionne de manière différente dans les contextes de mise en page comme Flexbox ou
Grid. Par exemple, dans une mise en page Flexbox, l'espace entre les éléments peut être géré par les propriétés justify-content et align-items au lieu
d'utiliser uniquement les marges. Cependant, margin-top reste fonctionnel dans ces systèmes pour l'espacement individuel des éléments.
- Rôle dans la réactivité : Lorsqu'on conçoit des pages Web réactives, margin-top peut être utilisé pour ajuster l'espacement en fonction de la taille de
l'écran. Par exemple, en utilisant des unités relatives comme les pourcentages ou rem, on peut rendre les marges plus flexibles et adaptées aux différentes résolutions d'écran,
améliorant ainsi la lisibilité et l'esthétique de la page.
- Interactions avec les boîtes flottantes : Les éléments flottants en CSS (créés avec float) peuvent modifier le comportement des marges, y compris
la marge supérieure. Par exemple, un élément flottant peut sortir du flux normal du document, ce qui affecte l'espacement des autres éléments en fonction de leurs marges.
- Effet sur les éléments positionnés : Lorsqu'un élément a une position relative, absolute, ou fixed, la propriété margin-top fonctionne
comme prévu dans la disposition du flux normal. Cependant, pour les éléments positionnés absolute ou fixed, la marge n'a pas d'impact direct sur leur positionnement,
qui est plutôt déterminé par les propriétés top, left, right, et bottom.
Dernière mise à jour : Dimanche, le 20 décembre 2015