margin-inline
Quick Summary for margin-inline
The margin-inline CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
Code Usage for margin-inline
/* <length> values */ margin-inline: 10px 20px;  /* An absolute length */ margin-inline: 1em 2em;    /* relative to the text size */ margin-inline: 5% 2%;      /* relative to the nearest block container's width */ margin-inline: 10px;       /* sets both start and end values */  /* Keyword values */ margin-inline: auto;  /* Global values */ margin-inline: inherit; margin-inline: initial; margin-inline: revert; margin-inline: unset;
More Details for margin-inline

margin-inline

The margin-inline CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.

/* <length> values */ margin-inline: 10px 20px;  /* An absolute length */ margin-inline: 1em 2em;    /* relative to the text size */ margin-inline: 5% 2%;      /* relative to the nearest block container's width */ margin-inline: 10px;       /* sets both start and end values */  /* Keyword values */ margin-inline: auto;  /* Global values */ margin-inline: inherit; margin-inline: initial; margin-inline: revert; margin-inline: unset;

This property corresponds to the margin-top and margin-bottom, or the margin-right and margin-left properties, depending on the values defined for writing-mode, direction, and text-orientation.

Constituent properties

This property is a shorthand for the following CSS properties:

margin-inline-start margin-inline-end

Syntax

The margin-inline property may be specified using one or two values.

When one value is specified, it applies the same margin to both start and end. When two values are specified, the first margin applies to the start, the second to the end.

Values

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

Formal definition

Initial value0
Applies tosame as margin
Inheritedno
Percentagesdepends on layout model
Computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
Animation typediscrete

Formal syntax

<'margin-left'>{1,2}

Examples

Setting inline start and end margins

CSS 
div {   background-color: yellow;   width: 120px;   height: auto;   border: 1px solid green; }  p {   margin: 0;   margin-inline: 20px 40px;   background-color: tan; }  .verticalExample {   writing-mode: vertical-rl; }
HTML 
<div>   <p>Example text</p> </div> <div class="verticalExample">   <p>Example text</p> </div>
Result

Specifications

Specification
CSS Logical Properties and Values Level 1 # propdef-margin-inline

See also

The mapped physical properties: margin-top, margin-right, margin-bottom, and margin-left writing-mode, direction, text-orientation

Last modified: Jan 7, 2022, by MDN contributors

Select your preferred language English (US)EspañolFrançais日本語 Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in CSS
rgb() rgba() :right right @right-bottom :root rotate rotate() rotate3d() rotateX() rotateY() rotateZ() row-gap ruby-align ruby-position saturate() scale scale() scale3d() scaleX() scaleY() scaleZ() :scope scroll-behavior scroll-margin scroll-margin-block scroll-margin-block-end scroll-margin-block-start scroll-margin-bottom scroll-margin-inline scroll-margin-inline-end scroll-margin-inline-start scroll-margin-left scroll-margin-right scroll-margin-top scroll-padding scroll-padding-block scroll-padding-block-end scroll-padding-block-start scroll-padding-bottom scroll-padding-inline scroll-padding-inline-end scroll-padding-inline-start scroll-padding-left scroll-padding-right scroll-padding-top scroll-snap-align scroll-snap-stop scroll-snap-type @scroll-timeline
Related Search Terms
CSS details 16
CSS https 20
CSS margin-inline 20
CSS text 19
CSS iframe 44
CSS git 35
CSS the 34
CSS index 35
CSS CSS 50
CSS css 46
CSS select 51
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
therock Somewhere along this crazy road I learned (often times the hard way) the most important things I can do is be authentic, trust my gut, be the hardest worker in the room, celebrate the mistakes, be a grateful man and always remember that it's nice to be important, but it's more important to be nice.
The Rock
Random CSS Property

border-block-end-width

The border-block-end-width CSS property defines the width of the logical block-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.
border-block-end-width css reference