margin-inline-end

В процессе перевода.

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS Свойство margin-inline-end  определяет отступ логического края  элемента, который сопоставляется с физическим отступом в зависимомти от режима написания, направленности и расположения текста. То есть оно соответствует margin-topmargin-rightmargin-bottom или margin-left свойству в зависимости от числа определяющего writing-mode, direction, и text-orientation.

Syntax

/* <length> values */
margin-inline-end: 10px;   /* An absolute length */
margin-inline-end: 1em;    /* relative to the text size */
margin-inline-end: 5%;     /* relative to the nearest block container's width */

/* Keyword values */
margin-inline-end: auto;

/* Global values */
margin-inline-end: inherit;
margin-inline-end: initial;
margin-inline-end: unset;

It relates to margin-block-start, margin-block-end, and margin-inline-start, which define the other margins of the element.

Начальное значение0
Применяется кс таким же margin
Наследуетсянет
Процентызависит от модели макета
Отображениевизуальный
Обработка значенияесли указано как длина - абсолютная длина; если указано как проценты - заданное значение; в противном случае auto
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Values

The margin-inline-end property takes the same values as the margin-left property.

Formal syntax

<'margin-left'>

Example

HTML

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

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-inline-end: 20px;
  background-color: #c8c800;
}

Specification

Specification Status Comment
CSS Logical Properties and Values Level 1
Определение 'margin-inline-end' в этой спецификации.
Редакторский черновик Initial definition

Browser compatibility

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Базовая поддержка
Экспериментальная
Chrome Полная поддержка 69
Полная поддержка 69
Полная поддержка 2
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-margin-end
Edge Нет поддержки НетFirefox Полная поддержка 41
Полная поддержка 41
Нет поддержки 38 — 51
Отключено
Отключено From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Полная поддержка 3
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -moz-margin-end
IE Нет поддержки НетOpera Полная поддержка 56
Полная поддержка 56
Полная поддержка 15
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-margin-end
Safari Полная поддержка 3
Альтернативное имя
Полная поддержка 3
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-margin-end
WebView Android Полная поддержка 69
Полная поддержка 69
Полная поддержка 2
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-margin-end
Chrome Android Полная поддержка 69
Полная поддержка 69
Полная поддержка 18
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-margin-end
Edge Mobile Нет поддержки НетFirefox Android Полная поддержка 41
Полная поддержка 41
Нет поддержки 38 — 51
Отключено
Отключено From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Полная поддержка 4
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -moz-margin-end
Opera Android Полная поддержка 56
Полная поддержка 56
Полная поддержка 14
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-margin-end
Safari iOS Полная поддержка 3
Альтернативное имя
Полная поддержка 3
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-margin-end
Samsung Internet Android Полная поддержка Да
Альтернативное имя
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-margin-end

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Использует нестандартное имя.
Использует нестандартное имя.

See also

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, Abdev
Обновлялась последний раз: mdnwebdocs-bot,