From 1e93693ca5c210548e973672581ba4f423006617 Mon Sep 17 00:00:00 2001 From: Utkarsh-Singhal-26 Date: Wed, 4 Feb 2026 16:22:00 +0530 Subject: [PATCH 1/2] [Term Entry] CSS Margins: margin-inline --- .../terms/margin-inline/margin-inline.md | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 content/css/concepts/margins/terms/margin-inline/margin-inline.md 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..6ac90644399 --- /dev/null +++ b/content/css/concepts/margins/terms/margin-inline/margin-inline.md @@ -0,0 +1,61 @@ +--- +Title: 'margin-inline' +Description: 'Defines the logical inline start and end margins for an element.' +Subjects: + - 'Web Development' + - 'Web Design' +Tags: + - 'Margin' + - 'Box Model' + - 'Positioning' +CatalogContent: + - 'learn-css' + - 'paths/front-end-engineer-career-path' + - 'paths/full-stack-engineer-career-path' +--- + +Defines the logical inline start and end margins for an element. + +## Syntax + +```css +margin-inline: ; +``` + +where `` can be one of the following: + +- Length: `20px` +- Percentage: `5%` +- Auto: `auto` + +> **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 + +Set the inline margins of the `h1` element to be `20px`: + +```css +h1 { + margin-inline: 20px; +} +``` + +## Example 2 + +Set 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 + +Set the inline margins of the `h1` element to be `5%`: + +```css +h1 { + margin-inline: 5%; +} +``` \ No newline at end of file From 9142e2ee8a4882c97cba84d593b95b4b8b95ade0 Mon Sep 17 00:00:00 2001 From: Mamta Wardhani Date: Wed, 11 Feb 2026 17:32:23 +0530 Subject: [PATCH 2/2] Revise margin-inline.md for clarity and examples Updated the margin-inline documentation to clarify usage and examples. --- .../terms/margin-inline/margin-inline.md | 37 ++++++++++++------- 1 file changed, 24 insertions(+), 13 deletions(-) diff --git a/content/css/concepts/margins/terms/margin-inline/margin-inline.md b/content/css/concepts/margins/terms/margin-inline/margin-inline.md index 6ac90644399..c5f96ae79d6 100644 --- a/content/css/concepts/margins/terms/margin-inline/margin-inline.md +++ b/content/css/concepts/margins/terms/margin-inline/margin-inline.md @@ -2,37 +2,48 @@ Title: 'margin-inline' Description: 'Defines the logical inline start and end margins for an element.' Subjects: - - 'Web Development' - 'Web Design' + - 'Web Development' Tags: - - 'Margin' - 'Box Model' + - 'Margin' - 'Positioning' CatalogContent: - 'learn-css' - 'paths/front-end-engineer-career-path' - - 'paths/full-stack-engineer-career-path' --- -Defines the logical inline start and end margins for an element. +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 -```css +```pseudo margin-inline: ; ``` -where `` can be one of the following: +Or, alternatively: -- Length: `20px` -- Percentage: `5%` -- Auto: `auto` +```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 -Set the inline margins of the `h1` element to be `20px`: +This example sets the inline margins of the `h1` element to be `20px`: ```css h1 { @@ -42,7 +53,7 @@ h1 { ## Example 2 -Set the inline-start margin of the `h1` element to be `10px` and inline-end margin to be `30px`: +This example sets the inline-start margin of the `h1` element to be `10px` and inline-end margin to be `30px`: ```css h1 { @@ -52,10 +63,10 @@ h1 { ## Example 3 -Set the inline margins of the `h1` element to be `5%`: +The following example sets the inline margins of the `h1` element to be `5%`: ```css h1 { margin-inline: 5%; } -``` \ No newline at end of file +```