CSS margin-inline property

The margin-inline CSS property is your key to controlling the space around elements on the horizontal axis (left and right). Think of it like carefully arranging furniture in a room for that perfect mix of comfort and style.

What does it do?

The margin-inline property sets the amount of space on the left and right sides of these website elements:

  • Text blocks (paragraphs, headings, etc.)
  • Images
  • Buttons
  • Videos
  • And other content boxes

Why does it matter?

margin-inline brings these benefits to your website:

  • Readability: Adds breathing room between elements making your content easier to read and digest.
  • Aesthetics: Creates a visually pleasing layout and prevents elements from looking cramped.
  • User Experience: Enhances how users interact with your site.

How to use it

You can set margin-inline with various values:

  • Pixels (px): For example, margin-inline: 30px;
  • Percentages (%): Offers flexibility based on the container size.
  • auto: Lets the browser calculate the best margin for you.

Example:

img { /* Targets all image elements */
  margin-inline: 15px;  /* Adds 15 pixels of space on both left and right */
}
  • Logical Properties: margin-inline is based on the writing mode of the language. In left-to-right languages, it controls side margins, while it affects top/bottom in vertical languages.
  • Shorthand Power: margin-inline sets both left and right. For individual sides, use margin-left and margin-right.
  • Relationship to Other Margin Properties: margin-inline is part of the larger ‘margin’ family, including margin-top, margin-bottom, and the general margin property.