From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/margin-bottom/index.html | 141 ++++++++++++++++++++++++++++++ 1 file changed, 141 insertions(+) create mode 100644 files/fr/web/css/margin-bottom/index.html (limited to 'files/fr/web/css/margin-bottom') diff --git a/files/fr/web/css/margin-bottom/index.html b/files/fr/web/css/margin-bottom/index.html new file mode 100644 index 0000000000..6da12febe9 --- /dev/null +++ b/files/fr/web/css/margin-bottom/index.html @@ -0,0 +1,141 @@ +--- +title: margin-bottom +slug: Web/CSS/margin-bottom +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/margin-bottom +--- +
{{CSSRef}}
+ +

La propriété margin-bottom définit la marge basse appliquée à un élément. On peut définir une marge négative qui rapprochera l'élément de ses voisins ou une marge positive qui l'en écartera..

+ +
{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}
+ + + +

Cette propriété n'a aucun effet sur les éléments en ligne (inline) qui ne sont pas remplacés comme {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>     */
+margin-bottom: 10px;    /* Une longueur absolue */
+margin-bottom: 1em;     /* Une longueur relative à la taille du texte */
+margin-bottom: 5%;      /* Une longueur relative à la
+                 largeur du bloc englobant */
+
+/* Valeurs avec un mot-clé */
+margin-bottom: auto;
+
+/* Valeurs globales*/
+margin-bottom: inherit;
+margin-bottom: initial;
+margin-bottom: unset;
+
+ +

La valeur de cette propriété peut être le mot-clé auto, une longueur (<length>) ou un pourcentage (<percentage>). Cette valeur peut être nulle, positive ou négative.

+ +

Valeurs

+ +
+
<length>
+
Cette valeur définit une largeur fixée. Pour les valeurs qui peuvent être utilisées, voir la page sur le type {{cssxref("<length>")}}.
+
<percentage>
+
Une valeur en pourcentage (type {{cssxref("<percentage>")}} qui est relative à la largeur du bloc englobant.
+
auto
+
Voir {{cssxref("margin")}}.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +

Grâce à la feuille de style on définit la marge basse et la hauteur des différentes div :

+ +
.box0 {
+  margin-bottom:1em;
+  height:3em;
+}
+.box1 {
+  margin-bottom:-1.5em;
+  height:4em;
+}
+.box2 {
+  border:1px dashed black;
+  border-width:1px 0;
+  margin-bottom:2em;
+}
+
+
+ +

On ajoute quelques règles afin de mieux visualiser les effets obtenus :

+ +
.container {
+  background-color:orange;
+  width:320px;
+  border:1px solid black;
+}
+div {
+  width:320px;
+  background-color:gold;
+}
+ +

HTML

+ +
<div class="container">
+<div class="box0">Boîte 0</div>
+<div class="box1">Boîte 1</div>
+<div class="box2">La marge négative de 1 m'attire vers le haut</div>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples',350,200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS3 Box')}}Pas de modification significative.
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}{{Spec2('CSS3 Transitions')}}margin-bottom peut désormais être animée.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}{{Spec2('CSS2.1')}}L'effet sur les éléments en ligne est supprimé.
{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.margin-bottom")}}

-- cgit v1.2.3-54-g00ecf