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/padding-block/index.md | 126 ++++++++++++++------------------ 1 file changed, 56 insertions(+), 70 deletions(-) (limited to 'files/fr/web/css/padding-block') diff --git a/files/fr/web/css/padding-block/index.md b/files/fr/web/css/padding-block/index.md index 83456aa210..cb96016492 100644 --- a/files/fr/web/css/padding-block/index.md +++ b/files/fr/web/css/padding-block/index.md @@ -9,12 +9,13 @@ tags: - Reference translation_of: Web/CSS/padding-block --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}{{SeeCompatTable}} -

La propriété padding-block définit l'espace de remplissage (padding) pour le début et la fin de l'axe de bloc de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et  {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+La propriété **`padding-block`** définit l'espace de remplissage (_padding_) pour le début et la fin de l'axe de bloc de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et  {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. -
/* Valeurs de longueur */
-/* Type <length> */
+```css
+/* Valeurs de longueur */
+/* Type  */
 padding-block: 10px 20px;  /* Des longueurs absolues */
 padding-block: 1em 2em;    /* Des longueurs relatives à la taille du texte */
 padding-block: 5% 2%;      /* Des longueurs relatives à la taille du bloc englobant */
@@ -27,25 +28,26 @@ padding-block: auto;
 padding-block: inherit;
 padding-block: initial;
 padding-block: unset;
-
+``` -

Ces valeurs peuvent être définies individuellement grâce aux propriétés détaillées {{cssxref("padding-block-start")}} et {{cssxref("padding-block-end")}}. Pour définir le remplissage sur l'axe en ligne, on pourra utiliser la propriété logique raccourcie {{cssxref("padding-inline")}} qui définit {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}}.

+Ces valeurs peuvent être définies individuellement grâce aux propriétés détaillées {{cssxref("padding-block-start")}} et {{cssxref("padding-block-end")}}. Pour définir le remplissage sur l'axe en ligne, on pourra utiliser la propriété logique raccourcie {{cssxref("padding-inline")}} qui définit {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}}. -

Syntaxe

+## Syntaxe -

Valeur

+### Valeur -

La propriété padding-block peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.

+La propriété `padding-block` peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}. -

Syntaxe formelle

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

Exemples

+## Exemples -

CSS

+### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -55,60 +57,44 @@ padding-block: unset;
   writing-mode: vertical-rl;
   padding-block: 20px 40px;
   background-color: #c8c800;
-}
- -

HTML

- -
<div>
-  <p class="texteExemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-padding-block", "padding-block")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.padding-block")}}

- -

Voir aussi

- - +} +``` + +### HTML + +```html +
+

Texte d'exemple

+
+``` + +### Résultat + +{{EmbedLiveSample("Exemples", 140, 140)}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-padding-block", "padding-block")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.padding-block")}} + +## Voir aussi + +- Les propriétés physiques correspondantes : + + - {{cssxref("padding-top")}}, + - {{cssxref("padding-right")}}, + - {{cssxref("padding-bottom")}}, + - {{cssxref("padding-left")}} + +- Les propriétés influençant les propriétés logiques : + + - {{cssxref("writing-mode")}}, + - {{cssxref("direction")}}, + - {{cssxref("text-orientation")}} -- cgit v1.2.3-54-g00ecf