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/block-size/index.md | 83 ++++++++++++++++-------------------- 1 file changed, 36 insertions(+), 47 deletions(-) (limited to 'files/fr/web/css/block-size/index.md') diff --git a/files/fr/web/css/block-size/index.md b/files/fr/web/css/block-size/index.md index 4ed59048b2..e669281858 100644 --- a/files/fr/web/css/block-size/index.md +++ b/files/fr/web/css/block-size/index.md @@ -9,25 +9,26 @@ tags: - Reference translation_of: Web/CSS/block-size --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}{{SeeCompatTable}} -

La propriété block-size est une propriété logique qui permet de définir la taille de l'élément dans la direction orthogonale au sens de lecture. Selon la valeur de la propriété {{cssxref("writing-mode")}}, elle correspondra à la propriété physique {{cssxref("width")}} ou {{cssxref("height")}}.

+La propriété **`block-size`** est une propriété _logique_ qui permet de définir la taille de l'élément dans la direction orthogonale au sens de lecture. Selon la valeur de la propriété {{cssxref("writing-mode")}}, elle correspondra à la propriété physique {{cssxref("width")}} ou {{cssxref("height")}}. -
{{EmbedInteractiveExample("pages/css/block-size.html")}}
+{{EmbedInteractiveExample("pages/css/block-size.html")}} -

Si le mode d'écriture est vertical, la valeur de block-size fera référence à la largeur de l'élément et sinon, elle fera référence à sa hauteur.

+Si le mode d'écriture est vertical, la valeur de `block-size` fera référence à la largeur de l'élément et sinon, elle fera référence à sa hauteur. -

L'autre propriété logique permettant de définir la dimension sur l'autre axe est {{cssxref("inline-size")}}.

+L'autre propriété logique permettant de définir la dimension sur l'autre axe est {{cssxref("inline-size")}}. -

Syntaxe

+## Syntaxe -
/* Valeurs de longueur */
-/* Type <length>       */
+```css
+/* Valeurs de longueur */
+/* Type        */
 block-size: 300px;
 block-size: 25em;
 
 /* Valeurs proportionnelles */
-/* Type <percentage>        */
+/* Type         */
 block-size: 75%;
 
 /* Valeurs avec un mot-clé */
@@ -43,63 +44,51 @@ block-size: auto;
 block-size: inherit;
 block-size: initial;
 block-size: unset;
-
+``` -

Valeurs

+### Valeurs -

La propriété block-size peut prendre les mêmes valeurs que {{cssxref("width")}} et {{cssxref("height")}}.

+La propriété `block-size` peut prendre les mêmes valeurs que {{cssxref("width")}} et {{cssxref("height")}}. -

Syntaxe formelle

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

Exemples

+## Exemples -

CSS

+### CSS -
.exemple {
+```css
+.exemple {
   writing-mode: vertical-rl;
   background-color: yellow;
   block-size: 200px;
-}
+} +``` -

HTML

+### HTML -
<p class="exemple">Texte d'exemple</p>
-
+```html +

Texte d'exemple

+``` -

Résultat

+### Résultat -

{{EmbedLiveSample("Exemples")}}

+{{EmbedLiveSample("Exemples")}} -

Spécification

+## Spécification - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- | +| {{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. | -

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

+{{Compat("css.properties.block-size")}} -

Voir aussi

+## Voir aussi - +- Les propriétés physiques correspondantes : {{cssxref("width")}} et {{cssxref("height")}} +- {{cssxref("writing-mode")}} -- cgit v1.2.3-54-g00ecf