margin-inline-start#

#Introduction

The margin-inline-start CSS property defines the logical inline start margin of an element.

In LTR direction, it corresponds to the margin-left property. In RTL direction, it corresponds to the margin-right property.

#Examples

css-apisrc/margin-inline-start/App.tsx

Preview

#Syntax

/* <length> values */
margin-inline-start: 0.5em;
margin-inline-start: 0px;
margin-inline-start: 2rpx;

/* <percentage> value */
margin-inline-start: 10%;

#Values

#0px

Default value.

#<length>

<length> means that the size of the margin as a fixed value, can be positive, zero, or negative.

#<percentage>

The size of the margin as a percentage, relative to the inline size (width) of the containing block.

#auto

Selects a suitable margin to use. For example, in certain cases this value can be used to center an element.

#Formal definition

#Formal syntax

margin-inline-start =
  <length-percentage>  |
  auto                 |

<length-percentage> =
  <length>      |
  <percentage>

#Difference with the Web

mdn: margin-inline-start

1. In Lynx, margins will not collapse at any time.
2. Currently, Lynx supports using auto in flex, grid and linear children that are not with position:fixed/absolute/sticky. Additionally, in linear layout, it only supports using auto on the cross axis. We plan to support using auto on the main axis in the future.
3. Lynx does not support writing mode.

#Compatibility