1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
---
title: inset
slug: Web/CSS/inset
tags:
- CSS
- Experimental
- Propriété
- Propriété logique
- Reference
translation_of: Web/CSS/inset
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<p>La propriété <strong><code>inset</code></strong> 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")}}, <code>inset</code> est une propriété raccourcie permettant de définir les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et/ou {{cssxref("left")}}.</p>
<pre class="brush:css no-line-numbers">/* 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;
</pre>
<h2 id="Syntaxe">Syntaxe</h2>
<h3 id="Valeurs">Valeurs</h3>
<p>La propriété <code>inset</code> prend les mêmes valeurs que la propriété {{cssxref("left")}}.</p>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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;
}</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div>
<span class="texteExemple">Texte d'exemple</span>
</div>
</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-inset", "inset")}}</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">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
<p>{{Compat("css.properties.inset")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>La propriété raccourcie physique {{cssxref("margin")}}</li>
<li>Les propriétés physiques détaillées :
<ul>
<li>{{cssxref("top")}},</li>
<li>{{cssxref("right")}},</li>
<li>{{cssxref("bottom")}},</li>
<li>{{cssxref("left")}}</li>
</ul>
</li>
<li>Les propriétés utilisées pour les autres propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
</ul>
|
