From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit

---
 files/fr/web/css/padding-block-start/index.html | 114 ++++++++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100644 files/fr/web/css/padding-block-start/index.html

(limited to 'files/fr/web/css/padding-block-start/index.html')

diff --git a/files/fr/web/css/padding-block-start/index.html b/files/fr/web/css/padding-block-start/index.html
new file mode 100644
index 0000000000..2af0e4d6fc
--- /dev/null
+++ b/files/fr/web/css/padding-block-start/index.html
@@ -0,0 +1,114 @@
+---
+title: padding-block-start
+slug: Web/CSS/padding-block-start
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/padding-block-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>padding-block-start</code></strong> définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>Elle est à rapprocher des propriétés {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}} qui définissent les autres écarts de remplissage logiques d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-block-start.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+padding-block-start: 10px;
+padding-block-start: 1em;
+
+/* Valeurs de proportions */
+/* Type &lt;percentage&gt;      */
+padding-block-start: 5%;  /* Relatif à la largeur du bloc englobant */
+
+/* Valeurs globales */
+padding-block-start: inherit;
+padding-block-start: initial;
+padding-block-start: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>padding-block-start</code> peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple et Lorem et IP sum&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  padding-block-start: 20px;
+  background-color: #C8C800;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-block-start", "padding-block-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.padding-block-start")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("padding-top")}},</li>
+   <li>{{cssxref("padding-right")}},</li>
+   <li>{{cssxref("padding-bottom")}},</li>
+   <li>{{cssxref("padding-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}},</li>
+ <li>{{cssxref("direction")}},</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
-- 
cgit v1.2.3-54-g00ecf