Sie lesen die englische Version dieses Inhalts, da für dieses Gebietsschema noch keine Übersetzung vorhanden ist. Helfen Sie uns, diesen Artikel zu übersetzen!
This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The margin-inline-end
CSS property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. In other words, it corresponds to the margin-top
, margin-right
, margin-bottom
or margin-left
property depending on the values defined for writing-mode
, direction
, and text-orientation
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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.
Initial value | 0 |
---|---|
Applies to | same as margin |
Inherited | no |
Percentages | depends on layout model |
Media | visual |
Computed value | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
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 The definition of 'margin-inline-end' in that specification. |
Editor's Draft | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
margin-inline-end | Chrome
Full support
69
| Edge No support No | Firefox
Full support
41
| IE No support No | Opera
Full support
56
| Safari
Full support
12.1
| WebView Android
Full support
69
| Chrome Android
Full support
69
| Firefox Android
Full support
41
| Opera Android
Full support
48
| Safari iOS
Full support
12.2
| Samsung Internet Android
Full support
Yes
|
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.
See also
margin-inline-start
- The mapped physical properties:
margin-top
,margin-right
,margin-bottom
, andmargin-left
writing-mode
,direction
,text-orientation