From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/margin-bottom/index.md | 138 ++++++++++++++------------------ 1 file changed, 58 insertions(+), 80 deletions(-) (limited to 'files/fr/web/css/margin-bottom') diff --git a/files/fr/web/css/margin-bottom/index.md b/files/fr/web/css/margin-bottom/index.md index a984e60431..0fb9de985f 100644 --- a/files/fr/web/css/margin-bottom/index.md +++ b/files/fr/web/css/margin-bottom/index.md @@ -7,18 +7,19 @@ tags: - Reference translation_of: Web/CSS/margin-bottom --- -
{{CSSRef}}
+{{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..

+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")}}
+{{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")}}.

+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

+## Syntaxe -
/* Valeurs de longueur */
-/* Type <length>     */
+```css
+/* Valeurs de longueur */
+/* Type      */
 margin-bottom: 10px;    /* Une longueur absolue */
 margin-bottom: 1em;     /* Une longueur relative à la taille du texte */
 margin-bottom: 5%;      /* Une longueur relative à la
@@ -31,32 +32,31 @@ margin-bottom: auto;
 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.

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

Valeurs

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

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -

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

+Grâce à la feuille de style on définit la marge basse et la hauteur des différentes `div` : -
.box0 {
+```css
+.box0 {
   margin-bottom:1em;
   height:3em;
 }
@@ -69,12 +69,12 @@ margin-bottom: unset;
   border-width:1px 0;
   margin-bottom:2em;
 }
+```
 
-
+On ajoute quelques règles afin de mieux visualiser les effets obtenus : -

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

- -
.container {
+```css
+.container {
   background-color:orange;
   width:320px;
   border:1px solid black;
@@ -82,56 +82,34 @@ margin-bottom: unset;
 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")}}

+} +``` + +### HTML + +```html +
+
Boîte 0
+
Boîte 1
+
La marge négative de 1 m'attire vers le haut
+
+``` + +### Résultat + +{{EmbedLiveSample('Exemples',350,200)}} + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------- | +| {{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