CSS Box Model Module | CSS Features

`margin`

Property Baseline: widely availablesince January 2018 Modern CSS: Anchor positioning

MDN The margin CSS shorthand property sets the margin area on all four sides of an element.

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;
  flex-shrink: 0;
}

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

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

Syntax

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

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: all elements except internal table elements, ruby base containers, and ruby annotation containers
Inherited: no
Percentages: refer to logical width of containing block
Computed value: see individual properties
Canonical order: per grammar
Animation type: by computed value type
Longhands: margin-top, margin-right, margin-bottom, margin-left

Browser support

First browser version supporting margin
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

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

Specification ↗ MDN reference ↗

`margin-bottom`

Property Baseline: widely availablesince January 2018 Modern CSS: Anchor positioning

MDN The margin-bottom CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

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;
  flex-shrink: 0;
}

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

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

Syntax

<length-percentage> | auto | <anchor-size()>

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: all elements except internal table elements, ruby base containers, and ruby annotation containers
Inherited: no
Percentages: refer to logical width of containing block
Computed value: the keyword auto or a computed <length-percentage> value
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting margin-bottom
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

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

Specification ↗ Extended in css-anchor-position-1 ↗ MDN reference ↗

`margin-left`

Property Baseline: widely availablesince January 2018 Modern CSS: Anchor positioning

MDN The margin-left CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

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 #5b6dcd 10px;
  background-color: rgb(229 232 252 / 0.6);
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffc129;
  background-color: rgb(255 244 219 / 0.6);
}

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

Syntax

<length-percentage> | auto | <anchor-size()>

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: all elements except internal table elements, ruby base containers, and ruby annotation containers
Inherited: no
Percentages: refer to logical width of containing block
Computed value: the keyword auto or a computed <length-percentage> value
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting margin-left
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

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

Specification ↗ Extended in css-anchor-position-1 ↗ MDN reference ↗

`margin-right`

Property Baseline: widely availablesince January 2018 Modern CSS: Anchor positioning

MDN The margin-right CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

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 #5b6dcd 10px;
  background-color: rgb(229 232 252 / 0.6);
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffc129;
  background-color: rgb(255 244 219 / 0.6);
}

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

Syntax

<length-percentage> | auto | <anchor-size()>

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: all elements except internal table elements, ruby base containers, and ruby annotation containers
Inherited: no
Percentages: refer to logical width of containing block
Computed value: the keyword auto or a computed <length-percentage> value
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting margin-right
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

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

Specification ↗ Extended in css-anchor-position-1 ↗ MDN reference ↗

`margin-top`

Property Baseline: widely availablesince January 2018 Modern CSS: Anchor positioning

MDN The margin-top CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

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;
  flex-shrink: 0;
}

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

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

Syntax

<length-percentage> | auto | <anchor-size()>

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: all elements except internal table elements, ruby base containers, and ruby annotation containers
Inherited: no
Percentages: refer to logical width of containing block
Computed value: the keyword auto or a computed <length-percentage> value
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting margin-top
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

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

Specification ↗ Extended in css-anchor-position-1 ↗ MDN reference ↗

`margin-trim`

Property Limited availability Modern CSS: margin-trim

MDN The margin-trim property allows the container to trim the margins of its children where they adjoin the container's edges.

Syntax

none | block | [ block-start || block-end ]

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

Definition

Initial: none
Applies to: block containers, multi-column containers
Inherited: no
Percentages: N/A
Computed value: a set of zero to two keywords indicating which sides to trim
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting margin-trim
Chrome	155
Edge	155
Firefox	No
Safari	16.4
Chrome Android	155
Safari iOS	16.4

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

Specification ↗ MDN reference ↗

`padding`

Property Baseline: widely availablesince January 2018

MDN The padding CSS shorthand property sets the padding area on all four sides of an element at once.

Live preview Example from MDN

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

.box {
  border: dashed 1px;
}

<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,4}

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: all elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers
Inherited: no
Percentages: refer to logical width of containing block
Computed value: see individual properties
Canonical order: per grammar
Animation type: by computed value type
Longhands: padding-top, padding-right, padding-bottom, padding-left

Browser support

First browser version supporting padding
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

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

Specification ↗ MDN reference ↗

`padding-bottom`

Property Baseline: widely availablesince January 2018

MDN The padding-bottom CSS property sets the height of the padding area on the bottom of an element.

Live preview Example from MDN

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

.box {
  border: dashed 1px;
}

<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

<length-percentage [0,∞]>

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: all elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers
Inherited: no
Percentages: refer to logical width of containing block
Computed value: a computed <length-percentage> value
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting padding-bottom
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

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

Specification ↗ MDN reference ↗

`padding-left`

Property Baseline: widely availablesince January 2018

MDN The padding-left CSS property sets the width of the padding area to the left of an element.

Live preview Example from MDN

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

.box {
  border: dashed 1px;
}

<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

<length-percentage [0,∞]>

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: all elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers
Inherited: no
Percentages: refer to logical width of containing block
Computed value: a computed <length-percentage> value
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting padding-left
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

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

Specification ↗ MDN reference ↗

`padding-right`

Property Baseline: widely availablesince January 2018

MDN The padding-right CSS property sets the width of the padding area on the right of an element.

Live preview Example from MDN

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

.box {
  border: dashed 1px;
}

<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

<length-percentage [0,∞]>

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: all elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers
Inherited: no
Percentages: refer to logical width of containing block
Computed value: a computed <length-percentage> value
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting padding-right
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

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

Specification ↗ MDN reference ↗

`padding-top`

Property Baseline: widely availablesince January 2018

MDN The padding-top CSS property sets the height of the padding area on the top of an element.

Live preview Example from MDN

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

.box {
  border: dashed 1px;
}

<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

<length-percentage [0,∞]>

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: all elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers
Inherited: no
Percentages: refer to logical width of containing block
Computed value: a computed <length-percentage> value
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting padding-top
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

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