margin-bottom |
Marge du bas |
| CSS |
|
Syntaxe
margin-bottom: paramètres;
|
Paramètres
| Paramètre |
Description |
| paramètres |
Ce paramètre de propriété permet d'indiquer la marge du bas : |
| 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 inférieur entre la fenêtre de navigateur et la page HTML.
Remarques
- Espacement sous un élément : La propriété margin-bottom contrôle la marge externe inférieure d'un élément, c'est-à-dire l'espace entre le bas de cet élément
et les éléments situés en dessous. Elle est particulièrement utile pour structurer la mise en page en créant un espacement cohérent entre les blocs de contenu.
- Valeurs possibles : margin-bottom accepte plusieurs types de valeurs, notamment des unités absolues comme px, cm, ou des unités relatives comme %, em, ou rem.
Par exemple, une valeur en pourcentage est calculée en fonction de la largeur du conteneur parent, ce qui permet des designs réactifs.
- Valeur par défaut : Par défaut, la propriété margin-bottom est définie à 0, ce qui signifie qu'aucun espace supplémentaire n'est ajouté sous l'élément. Si
un espace est visible, il provient d'autres propriétés, comme un padding ou une autre marge externe.
- Importance dans les flux de documents : margin-bottom joue un rôle clef dans les documents HTML structurés
verticalement. Elle est souvent utilisée pour ajuster l'espacement entre les paragraphes, les titres, et d'autres éléments en fonction de la hiérarchie visuelle.
- Interaction avec le modèle de boîte : La propriété margin-bottom n'affecte pas la taille ou les dimensions de l'élément lui-même. Elle agit uniquement
sur l'espace externe. En revanche, son impact visuel est évident lorsqu'elle est combinée avec padding ou border.
- Collapsing margins : Lorsque deux marges verticales adjacentes (comme margin-bottom et margin-top) se rencontrent, elles peuvent se "fusionner" en
une seule marge (la plus grande des deux). Ce comportement de "marges fusionnées" peut être surprenant et nécessite souvent des ajustements dans la conception.
- Réactivité et design fluide : Avec des unités relatives comme % ou vh, margin-bottom permet de concevoir des mises en page réactives s'ajustant
dynamiquement en fonction de la taille de l'écran ou du conteneur. Cela est particulièrement utile pour les applications modernes et les sites web adaptatifs.
- Héritage et importance contextuelle : Contrairement à certaines propriétés CSS, margin-bottom n'est pas héritée par défaut. Cependant, elle peut
être affectée globalement à des éléments avec des sélecteurs comme * ou via des classes utilitaires dans des cadres d'applications CSS (exemple
Bootstrap, Tailwind CSS).
Dernière mise à jour : Dimanche, le 20 décembre 2015
