CSS margin-inline Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 25 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The margin-inline property in CSS is a shorthand property that sets the margin on the inline-start and inline-end sides of an element.

Unlike the margin-left and margin-right properties, which set margins relative to the physical left and right, margin-inline adjusts margins based on the logical order of content. This makes it especially useful in multilingual and internationalized web design, where text direction can vary between left-to-right (LTR) and right-to-left (RTL) languages.

💡 Syntax

The syntax for the margin-inline property can be written in several ways, depending on the number of values specified:

Syntax

Copied

element {
  margin-inline: start end;
}

If one value is provided, it applies to both margin-inline-start and margin-inline-end.
If two values are provided, the first value applies to margin-inline-start and the second to margin-inline-end.

🎛️ Default Value

The default value of margin-inline is 0, meaning no margin is applied to the inline-start and inline-end sides by default.

🏠 Property Values

Value	Description
length	Specifies the margin in units such as pixels (px), ems (em), etc. Example: 10px.
percentage	Specifies the margin as a percentage of the containing element's width. Example: 5%.
auto	The browser calculates a suitable margin.
initial	Sets the property to its default value.
inherit	Inherits the margin value from the parent element.

📄 Example

In this example, we'll apply different margins to the inline-start and inline-end sides of a paragraph element.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS margin-inline Example</title>
  <style>
    p {
      margin-inline: 20px 40px;
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Paragraph with Custom Inline Margins</h1>
  <p>
    This paragraph has a margin of 20px on the inline-start side and 40px on the inline-end side. 
    In an LTR layout, the margins are applied to the left and right, respectively.
  </p>
</body>
</html>

🖥️ Browser Compatibility

The margin-inline property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The margin-inline property is a versatile tool for managing margins in a way that respects the text direction of different languages.

By using this property, web developers can create layouts that adapt gracefully to both LTR and RTL content. Experiment with different values and see how margin-inline can enhance your web design projects.