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/inset/index.html | 115 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 files/fr/web/css/inset/index.html (limited to 'files/fr/web/css/inset') diff --git a/files/fr/web/css/inset/index.html b/files/fr/web/css/inset/index.html new file mode 100644 index 0000000000..bf91e20df5 --- /dev/null +++ b/files/fr/web/css/inset/index.html @@ -0,0 +1,115 @@ +--- +title: inset +slug: Web/CSS/inset +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/inset +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété inset définit les décalages physiques d'un élément. Bien qu'elle fasse partie de la spécification sur les propriétés logiques, sa valeur ne dépend pas du mode d'écriture de l'élément, de sa direction ou de l'orientation du texte. La syntaxe de cette propriété suit la même structure que {{cssxref("margin")}}, inset est une propriété raccourcie permettant de définir les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et/ou {{cssxref("left")}}.

+ +
/* Valeurs de longueurs */
+/* Type <length> */
+inset: 10px; /* la valeur est appliquée à l'ensemble des côtés */
+inset: 4px 8px; /* haut/bas gauche/droit */
+inset: 5px 15px 10px; /* haut gauche/droit bas */
+inset: 2.4em 3em 3em 3em; /* haut droit bas gauche */
+
+/* pourcentages de la largeur/hauteur du bloc englobant */
+inset: 10% 5% 5% 5%;
+
+/* Valeur avec un mot-clé */
+inset: auto;
+
+/* Valeurs globales */
+inset: inherit;
+inset: initial;
+inset: unset;
+
+
+ +

Syntaxe

+ +

Valeurs

+ +

La propriété inset prend les mêmes valeurs que la propriété {{cssxref("left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 150px;
+  height: 120px;
+  position: relative;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  position: absolute;
+  inset: 20px 40px 30px 10px;
+  background-color: #c8c800;
+}
+ +

HTML

+ +
<div>
+  <span class="texteExemple">Texte d'exemple</span>
+</div>
+
+ +

Résultat

+ +

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

+ +

Spécifications

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

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.inset")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf