margin-inline-end#

#Introduction

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

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

#Examples

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

Preview

#Syntax

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

/* <percentage> value */
margin-inline-end: 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. It can be positive, zero, or negative.

#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-end =
  <length-percentage>  |
  auto                 |

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

#Difference with the Web

mdn: margin-inline-end

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