CSS Margin-Inline Simplify Element Spacing

Introduction

The margin-inline CSS property is a shorthand for setting both the logical inline start and end margins of an element. It is particularly useful for handling various writing modes, directionality, and text orientations. This property adapts to the element’s context, making it easier to manage spacing around elements.

Description

The margin-inline CSS property sets the logical inline start and end margins of an element. It can be specified with one or two values:

• One value: Applies the same margin to both the start and end.
• Two values: The first value applies to the start, and the second value applies to the end.

Constituent Properties

The margin-inline property combines two other CSS properties:

1. margin-inline-start: Sets the margin at the start of the element’s inline direction.
2. margin-inline-end: Sets the margin at the end of the element’s inline direction.

Syntax

/* <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: revert-layer;
margin-inline: unset;

Explanation of the Syntax:

• One Value: When a single value is specified, it applies the same margin to both the start and end of the inline direction.
  • Example: margin-inline: 10px; sets both the start and end margins to 10 pixels.
• Two Values: When two values are specified, the first value applies to the start, and the second value applies to the end.
  • Example: margin-inline: 10px 20px; sets the start margin to 10 pixels and the end margin to 20 pixels.

Values

The margin-inline property can take various values:

1. Length Values: Fixed values like 10px, 1em, etc.
2. Percentage Values: Relative to the nearest block container’s width, like 5%.
3. Auto: Allows the browser to determine the margin.
4. Global Values: inherit, initial, revert, revert-layer, and unset.

Examples:

• margin-inline: 10px 20px;: Sets the start margin to 10 pixels and the end margin to 20 pixels.
• margin-inline: 1em 2em;: Sets the start margin to 1em and the end margin to 2em.
• margin-inline: 5% 2%;: Sets the start margin to 5% and the end margin to 2%.
• margin-inline: 10px;: Sets both the start and end margins to 10 pixels.
• margin-inline: auto;: Allows the browser to determine the margins.
• margin-inline: inherit;: Inherits the margin values from the parent element.
• margin-inline: initial;: Sets the margins to their initial value (0).
• margin-inline: revert;: Reverts the margins to the value defined by the user-agent stylesheet.
• margin-inline: revert-layer;: Reverts the margins considering the cascade layer.
• margin-inline: unset;: Resets the margins to their natural value.

Formal Definition

The margin-inline property is a shorthand that sets the logical inline start and end margins of an element.

Initial Value: 0

Applies To: Same as the margin property.

Inherited: No.

Percentages: Relative to the nearest block container’s width.

Computed Value:

• margin-inline-start: If specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto.
• margin-inline-end: If specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto.

Animation Type: A length, interpolated as real, floating-point numbers.

Formal Syntax:

margin-inline =
  [<'margin-top'>]{1,2}

<margin-top> =
  <length-percentage> |
  auto |
  <anchor-size()>

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

<anchor-size()> =
  anchor-size([<anchor-element> || <anchor-size>]?, <length-percentage>?)

<anchor-element> =
  <dashed-ident>

<anchor-size> =
  width |
  height |
  block |
  inline |
  self-block |
  self-inline

Using margin-inline provides a concise and powerful way to manage the spacing around elements, ensuring consistency and adaptability in your web designs.

Examples

Basic Usage

HTML:

<div>
  <p>Example text</p>
</div>

CSS:

div {
  background-color: yellow;
  width: 120px;
  height: auto;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-inline: 20px 40px;
  background-color: tan;
}

Result: The paragraph will have a 20px margin at the start and a 40px margin at the end, within the div.

Vertical Writing Mode

HTML:

<div class="verticalExample">
  <p>Example text</p>
</div>

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;
}

Result: The paragraph will have a 20px margin at the start and a 40px margin at the end, but these margins will be oriented vertically due to the vertical-rl writing mode.

Auto Margins

HTML:

<div>
  <p>Example text</p>
</div>

CSS:

div {
  background-color: yellow;
  width: 120px;
  height: auto;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-inline: auto;
  background-color: tan;
}

Result: The browser will automatically determine the margins for the paragraph, providing a flexible layout.

Percentage Values

HTML:

<div>
  <p>Example text</p>
</div>

CSS:

div {
  background-color: yellow;
  width: 120px;
  height: auto;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-inline: 10% 20%;
  background-color: tan;
}

Result: The paragraph will have a 10% margin at the start and a 20% margin at the end, relative to the width of the div.

Specifications

The margin-inline property is defined in the CSS Logical Properties and Values Level 1 specification. This specification ensures that the property is standardized and widely supported across browsers, making it a reliable tool for web developers.

Browser Compatibility

The margin-inline property is supported in:

• Google Chrome: Since version 87.
• Microsoft Edge: Since version 87.
• Mozilla Firefox: Since version 66.
• Opera: Since version 73.
• Safari: Since version 14.1.

See Also

For further reading and related topics, you may want to explore the following resources:

• CSS Logical Properties and Values: Learn more about logical properties and values in CSS, which provide a more intuitive way to manage element layouts in different writing modes and directions.
• Mapped Physical Properties:
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
• Related CSS Properties:
  • writing-mode: Controls the writing mode of the text, such as horizontal or vertical.
  • direction: Sets the directionality of the text, such as left-to-right (LTR) or right-to-left (RTL).
  • text-orientation: Defines the orientation of the text, such as upright or sideways.

These resources provide a deeper understanding of how the margin-inline property fits into the broader context of CSS logical properties and values, helping you create more adaptable and responsive web designs.

Help Improve MDN

If you found this page helpful or have suggestions for improvement, please let us know. Your feedback is essential in making MDN a better resource for everyone.

• Learn how to contribute
• View this page on GitHub
• Report a problem with this content

This page was last modified on Jul 18, 2023 by MDN contributors.