diff --git a/content/css/concepts/margins/terms/margin-inline/margin-inline.md b/content/css/concepts/margins/terms/margin-inline/margin-inline.md new file mode 100644 index 00000000000..c5f96ae79d6 --- /dev/null +++ b/content/css/concepts/margins/terms/margin-inline/margin-inline.md @@ -0,0 +1,72 @@ +--- +Title: 'margin-inline' +Description: 'Defines the logical inline start and end margins for an element.' +Subjects: + - 'Web Design' + - 'Web Development' +Tags: + - 'Box Model' + - 'Margin' + - 'Positioning' +CatalogContent: + - 'learn-css' + - 'paths/front-end-engineer-career-path' +--- + +The **`margin-inline`** property sets the logical inline-start and inline-end margins of an element. These logical margins adjust automatically based on the element’s writing mode and text direction. + +## Syntax + +```pseudo +margin-inline: ; +``` + +Or, alternatively: + +```pseudo +margin-inline: ; +``` + +**Parameters:** + +- ``: Specifies the inline margins. Acceptable values include: + - Length values such as `20px`, `2rem` + - Percentage values such as `5%` + - `auto` + - Global values such as `inherit`, `initial`, `unset`, and `revert` + +**Return value:** + +None. This property sets the inline margins of an element. + +> **Note:** This property accepts one or two values. When one value is provided, it applies to both inline-start and inline-end. When two values are provided, the first applies to inline-start and the second to inline-end. Values provided may be negative, placing the element closer. + +## Example 1 + +This example sets the inline margins of the `h1` element to be `20px`: + +```css +h1 { + margin-inline: 20px; +} +``` + +## Example 2 + +This example sets the inline-start margin of the `h1` element to be `10px` and inline-end margin to be `30px`: + +```css +h1 { + margin-inline: 10px 30px; +} +``` + +## Example 3 + +The following example sets the inline margins of the `h1` element to be `5%`: + +```css +h1 { + margin-inline: 5%; +} +```