margin-inline-start

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Свойство margin-inline-start CSS задает логическое строковое (inline)  значение start margin элемента, которое сопоставляется с физическим значением margin в зависимости от режима записи (writing_mode) элемента, направленности и ориентации текста. Это логическое свойство соответствует одному из свойств margin-topmargin-rightmargin-bottom, or margin-left в зависимости от значений writing-mode, direction, and text-orientation.

/* <length> values */
margin-inline-start: 10px;  /* абсолютная величина */
margin-inline-start: 1em;   /* относительно размера текста */
margin-inline-start: 5%;    /* относительно ширины ближайшего контейнера */

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

/* Global values */
margin-inline-start: inherit;

Это свойство связано со свойствами margin-block-start, margin-block-end и margin-inline-end, которые определяют другие компоненты margins элемента.

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

Синтаксис

Значения

Свойство margin-inline-start принимает такие же значения как и свойство margin-left.

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

<'margin-left'>

Пример

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-start: 20px;
  background-color: #c8c800;
}

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

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

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Базовая поддержка
Экспериментальная
Chrome Полная поддержка 69
Полная поддержка 69
Полная поддержка 2
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-margin-start
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-start
IE Нет поддержки НетOpera Полная поддержка 56
Полная поддержка 56
Полная поддержка 15
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-margin-start
Safari Полная поддержка 3
Альтернативное имя
Полная поддержка 3
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-margin-start
WebView Android Полная поддержка 69
Полная поддержка 69
Полная поддержка 2
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-margin-start
Chrome Android Полная поддержка 69
Полная поддержка 69
Полная поддержка 18
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-margin-start
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-start
Opera Android Полная поддержка 56
Полная поддержка 56
Полная поддержка 14
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-margin-start
Safari iOS Полная поддержка 3
Альтернативное имя
Полная поддержка 3
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-margin-start
Samsung Internet Android Полная поддержка Да
Альтернативное имя
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-margin-start

Легенда

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

Смотри также

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

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