From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/inset/index.html | 98 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 files/ru/web/css/inset/index.html (limited to 'files/ru/web/css/inset') diff --git a/files/ru/web/css/inset/index.html b/files/ru/web/css/inset/index.html new file mode 100644 index 0000000000..a6d25722ca --- /dev/null +++ b/files/ru/web/css/inset/index.html @@ -0,0 +1,98 @@ +--- +title: inset +slug: Web/CSS/inset +tags: + - смещение элемента +translation_of: Web/CSS/inset +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Свойство CSS inset определяет логический блок и встроенные начальное и конечное смещения элемента, которые отображают физическое смещение, зависящее от способа записи, направления и ориентации текста. Оно соответствует свойствам  {{cssxref("top")}} и {{cssxref("bottom")}}, или {{cssxref("right")}} и {{cssxref("left")}}, в зависимости от значений, определенных для {{cssxref("writing-mode")}}, {{cssxref("direction")}}, и {{cssxref("text-orientation")}}.

+ +
/* <length> значения */
+inset: 3px 10px 3px 10px;
+inset: 2.4em 3em 3em 3em;
+inset: 10px; /* значение применяется ко всем сторонам */
+
+/* <percentage> от ширины или высоты внешнего блока */
+inset: 10% 5% 5% 5%;
+
+/* Ключевое значение */
+inset: auto;
+
+/* Глобальные значения */
+inset: inherit;
+inset: initial;
+inset: unset;
+
+
+ +

{{cssinfo}}

+ +

Синтаксис

+ +

Значения

+ +

Свойство inset принимает значения, аналогичные значениям свойства {{cssxref("left")}}.

+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

HTML-содержимое

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS-содержимое

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

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

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS Logical Properties", "#propdef-inset", "inset")}}{{Spec2("CSS Logical Properties")}}Первое определение
+ +

Поддержка браузера

+ + + +

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

+ +

Смотрите также

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