CSS Logical Properties and Values

`margin-block`

Property Baseline: widely availablesince March 2024 Modern CSS: Anchor positioning

MDN The margin-block CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.

Live preview Example from MDN

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  flex-direction: column;
  justify-content: flex-start;
}

.row {
  height: 33.33%;
  display: inline-block;
  border: solid #ce7777 10px;
  background-color: #2b3a55;
  color: white;
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffbf00;
  background-color: #2b3a55;
}

<section id="default-example">
  <div id="container">
    <div class="row">One</div>
    <div class="row transition-all" id="example-element">Two</div>
    <div class="row">Three</div>
  </div>
</section>

Syntax

<'margin-top'>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: see individual properties
Applies to: see individual properties
Inherited: see individual properties
Percentages: see individual properties
Computed value: see individual properties
Canonical order: per grammar
Animation type: see individual properties
Longhands: margin-block-start, margin-block-end

Browser support

First browser version supporting margin-block
Chrome	87
Edge	87
Firefox	66
Safari	14.1
Chrome Android	87
Safari iOS	14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`margin-block-end`

Property Baseline: widely availablesince March 2024 Modern CSS: Anchor positioning

MDN The margin-block-end CSS property defines the logical block end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.

Live preview Example from MDN

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  flex-direction: column;
  justify-content: flex-start;
}

.row {
  height: 33.33%;
  display: inline-block;
  border: solid #ce7777 10px;
  background-color: #2b3a55;
  color: white;
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffbf00;
  background-color: #2b3a55;
}

<section id="default-example">
  <div id="container">
    <div class="row">One</div>
    <div class="row transition-all" id="example-element">Two</div>
    <div class="row">Three</div>
  </div>
</section>

Syntax

<'margin-top'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: Same as margin-top
Inherited: no
Percentages: As for the corresponding physical property
Computed value: Same as corresponding margin-* properties
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting margin-block-end
Chrome	69
Edge	79
Firefox	41
Safari	12.1
Chrome Android	69
Safari iOS	12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`margin-block-start`

Property Baseline: widely availablesince March 2024 Modern CSS: Anchor positioning

MDN The margin-block-start CSS property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.

Live preview Example from MDN

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  flex-direction: column;
  justify-content: flex-start;
}

.row {
  height: 33.33%;
  display: inline-block;
  border: solid #ce7777 10px;
  background-color: #2b3a55;
  color: white;
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffbf00;
  background-color: #2b3a55;
}

<section id="default-example">
  <div id="container">
    <div class="row">One</div>
    <div class="row transition-all" id="example-element">Two</div>
    <div class="row">Three</div>
  </div>
</section>

Syntax

<'margin-top'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: Same as margin-top
Inherited: no
Percentages: As for the corresponding physical property
Computed value: Same as corresponding margin-* properties
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting margin-block-start
Chrome	69
Edge	79
Firefox	41
Safari	12.1
Chrome Android	69
Safari iOS	12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`margin-inline`

Property Baseline: widely availablesince March 2024 Modern CSS: Anchor positioning

MDN The margin-inline CSS shorthand property defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.

Live preview Example from MDN

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  justify-content: flex-start;
}

.col {
  width: 33.33%;
  border: solid #ce7777 10px;
  background-color: #2b3a55;
  color: white;
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffbf00;
  background-color: #2b3a55;
  unicode-bidi: bidi-override;
}

<section id="default-example">
  <div id="container">
    <div class="col">One</div>
    <div class="col transition-all" id="example-element">Two</div>
    <div class="col">Three</div>
  </div>
</section>

Syntax

<'margin-top'>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: see individual properties
Applies to: see individual properties
Inherited: see individual properties
Percentages: see individual properties
Computed value: see individual properties
Canonical order: per grammar
Animation type: see individual properties
Longhands: margin-inline-start, margin-inline-end

Browser support

First browser version supporting margin-inline
Chrome	87
Edge	87
Firefox	66
Safari	14.1
Chrome Android	87
Safari iOS	14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`margin-inline-end`

Property Baseline: widely availablesince March 2024 Modern CSS: Anchor positioning

MDN The margin-inline-end CSS property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. In other words, it corresponds to the margin-top, margin-right, margin-bottom or margin-left property depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  justify-content: flex-start;
}

.col {
  width: 33.33%;
  border: solid #ce7777 10px;
  background-color: #2b3a55;
  color: white;
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffbf00;
  background-color: #2b3a55;
  unicode-bidi: bidi-override;
}

<section id="default-example">
  <div id="container">
    <div class="col">One</div>
    <div class="col transition-all" id="example-element">Two</div>
    <div class="col">Three</div>
  </div>
</section>

Syntax

<'margin-top'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: Same as margin-top
Inherited: no
Percentages: As for the corresponding physical property
Computed value: Same as corresponding margin-* properties
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting margin-inline-end
Chrome	69
Edge	79
Firefox	41
Safari	12.1
Chrome Android	69
Safari iOS	12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`margin-inline-start`

Property Baseline: widely availablesince March 2024 Modern CSS: Anchor positioning

MDN The margin-inline-start CSS property defines the logical inline start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. It corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  justify-content: flex-start;
}

.col {
  width: 33.33%;
  border: solid #ce7777 10px;
  background-color: #2b3a55;
  color: white;
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffbf00;
  background-color: #2b3a55;
  unicode-bidi: bidi-override;
}

<section id="default-example">
  <div id="container">
    <div class="col">One</div>
    <div class="col transition-all" id="example-element">Two</div>
    <div class="col">Three</div>
  </div>
</section>

Syntax

<'margin-top'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: Same as margin-top
Inherited: no
Percentages: As for the corresponding physical property
Computed value: Same as corresponding margin-* properties
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting margin-inline-start
Chrome	69
Edge	79
Firefox	41
Safari	12.1
Chrome Android	69
Safari iOS	12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`padding-block`

Property Baseline: widely availablesince March 2024

MDN The padding-block CSS shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.

Live preview Example from MDN

#example-element {
  border: 10px solid #ffc129;
  overflow: hidden;
  text-align: left;
}

.box {
  border: dashed 1px;
  unicode-bidi: bidi-override;
}

<section id="default-example">
  <div class="transition-all" id="example-element">
    <div class="box">
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
    </div>
  </div>
</section>

Syntax

<'padding-top'>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: see individual properties
Applies to: see individual properties
Inherited: see individual properties
Percentages: see individual properties
Computed value: see individual properties
Canonical order: per grammar
Animation type: see individual properties
Longhands: padding-block-start, padding-block-end

Browser support

First browser version supporting padding-block
Chrome	87
Edge	87
Firefox	66
Safari	14.1
Chrome Android	87
Safari iOS	14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`padding-block-end`

Property Baseline: widely availablesince March 2024

MDN The padding-block-end CSS property defines the logical block end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.

Live preview Example from MDN

#example-element {
  border: 10px solid #ffc129;
  overflow: hidden;
  text-align: left;
}

.box {
  border: dashed 1px;
  unicode-bidi: bidi-override;
}

<section id="default-example">
  <div class="transition-all" id="example-element">
    <div class="box">
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
    </div>
  </div>
</section>

Syntax

<'padding-top'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: Same as padding-top
Inherited: no
Percentages: As for the corresponding physical property
Computed value: Same as corresponding padding-* properties
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting padding-block-end
Chrome	69
Edge	79
Firefox	41
Safari	12.1
Chrome Android	69
Safari iOS	12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`padding-block-start`

Property Baseline: widely availablesince March 2024

MDN The padding-block-start CSS property defines the logical block start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.

Live preview Example from MDN

#example-element {
  border: 10px solid #ffc129;
  overflow: hidden;
  text-align: left;
}

.box {
  border: dashed 1px;
  unicode-bidi: bidi-override;
}

<section id="default-example">
  <div class="transition-all" id="example-element">
    <div class="box">
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
    </div>
  </div>
</section>

Syntax

<'padding-top'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: Same as padding-top
Inherited: no
Percentages: As for the corresponding physical property
Computed value: Same as corresponding padding-* properties
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting padding-block-start
Chrome	69
Edge	79
Firefox	41
Safari	12.1
Chrome Android	69
Safari iOS	12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`padding-inline`

Property Baseline: widely availablesince March 2024

MDN The padding-inline CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.

Live preview Example from MDN

#example-element {
  border: 10px solid #ffc129;
  overflow: hidden;
  text-align: left;
}

.box {
  border: dashed 1px;
  unicode-bidi: bidi-override;
}

<section id="default-example">
  <div class="transition-all" id="example-element">
    <div class="box">
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
    </div>
  </div>
</section>

Syntax

<'padding-top'>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: see individual properties
Applies to: see individual properties
Inherited: see individual properties
Percentages: see individual properties
Computed value: see individual properties
Canonical order: per grammar
Animation type: see individual properties
Longhands: padding-inline-start, padding-inline-end

Browser support

First browser version supporting padding-inline
Chrome	87
Edge	87
Firefox	66
Safari	14.1
Chrome Android	87
Safari iOS	14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`padding-inline-end`

Property Baseline: widely availablesince March 2024

MDN The padding-inline-end CSS property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.

Live preview Example from MDN

#example-element {
  border: 10px solid #ffc129;
  overflow: hidden;
  text-align: left;
}

.box {
  border: dashed 1px;
  unicode-bidi: bidi-override;
}

<section id="default-example">
  <div class="transition-all" id="example-element">
    <div class="box">
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
    </div>
  </div>
</section>

Syntax

<'padding-top'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: Same as padding-top
Inherited: no
Percentages: As for the corresponding physical property
Computed value: Same as corresponding padding-* properties
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting padding-inline-end
Chrome	69
Edge	79
Firefox	41
Safari	12.1
Chrome Android	69
Safari iOS	12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`padding-inline-start`

Property Baseline: widely availablesince March 2024

MDN The padding-inline-start CSS property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.

Live preview Example from MDN

#example-element {
  border: 10px solid #ffc129;
  overflow: hidden;
  text-align: left;
}

.box {
  border: dashed 1px;
  unicode-bidi: bidi-override;
}

<section id="default-example">
  <div class="transition-all" id="example-element">
    <div class="box">
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
    </div>
  </div>
</section>

Syntax

<'padding-top'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: Same as padding-top
Inherited: no
Percentages: As for the corresponding physical property
Computed value: Same as corresponding padding-* properties
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting padding-inline-start
Chrome	69
Edge	79
Firefox	41
Safari	12.1
Chrome Android	69
Safari iOS	12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

Each feature in detail

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support