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.