CSS Box Model Module Level 4
CSS Box Model Module Level 4
Editor’s Draft
21 October 2025
More details about this document
This version:
Latest published version:
Previous Versions:
Feedback:
CSSWG Issues Repository
Inline In Spec
Editor:
Elika J. Etemad / fantasai
Apple
Suggest an Edit for this Spec:
GitHub Editor
World Wide Web Consortium
W3C
liability
trademark
and
permissive document license
rules apply.
Abstract
This specification describes the margin and padding properties, which create spacing in and around a CSS box. It may later be extended to include borders (currently described in
[css-backgrounds-3]
).
CSS
is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc.
Status of this document
This is a public copy of the editors’ draft.
It is provided for discussion only and may change at any moment.
Its publication here does not imply endorsement of its contents by W3C.
Don’t cite this document other than as work in progress.
Please send feedback
by
filing issues in GitHub
(preferred),
including the spec code “css-box” in the title, like this:
“[css-box]
…summary of comment…
”.
All issues and comments are
archived
Alternately, feedback can be sent to the (
archived
) public mailing list
www-style@w3.org
This document is governed by the
18 August 2025 W3C Process Document
1.
Introduction
This subsection is not normative.
CSS describes how each element
and each string of text in a source document
is laid out by transforming the
element tree
into a set of
boxes
whose size, position, and stacking level on the
canvas
depend on the values of their CSS properties.
Note:
CSS Cascading and Inheritance
describes how properties are assigned to elements in the box tree,
while
CSS Display 3
§ 1 Introduction
describes how the
element tree
is transformed into the
box tree
Each CSS
box
has a rectangular content area,
a band of padding around the content,
a border around the padding,
and a margin outside the border.
The
sizing properties
[css-sizing-3]
together with various other properties that control layout,
define the size of the content area.
The box styling properties—
padding
and its longhands,
border
and its longhands,
and
margin
and its longhands—define the sizes of these other areas.
Margins and padding are defined in this module;
borders are defined in
[css-backgrounds-3]
Note:
This module
originally contained
the CSS Level 3 specification prose relating to
box generation (now defined in
[css-display-3]
),
the box model (defined here),
as well as block layout (now only defined in
[CSS2]
Chapters 9 and 10).
Since its maintenance was put aside during the development of CSS2.1,
its prose was severely outdated by the time CSS2 Revision 1
was finally completed.
Therefore, the block layout portion of the prose has been retired,
to be re-synched to
CSS2
and updated
as input to a new Block Layout module at some point in the future.
It is being split apart from this module
and from the
CSS Display Module
both because of the practical concern that it would be a huge amount of work
and also in recognition that CSS now has multiple layout models
Flex Layout
Grid Layout
Positioned Layout
and
Table Layout
in addition to Block Layout)
which each deserve their own parallel module.
1.1.
Value Definitions
This specification follows the
CSS property definition conventions
from
[CSS2]
using the
value definition syntax
from
[CSS-VALUES-3]
Value types not defined in this specification are defined in CSS Values & Units
[CSS-VALUES-3]
Combination with other CSS modules may expand the definitions of these value types.
In addition to the property-specific values listed in their definitions,
all properties defined in this specification
also accept the
CSS-wide keywords
as their property value.
For readability they have not been repeated explicitly.
1.2.
Module Interactions
This module replaces the definitions of the margin and padding properties
defined in
[CSS2]
sections 8.1, 8.2, 8.3 (but not 8.3.1), and 8.4.
All properties in this module apply to the
::first-line
and
::first-letter
pseudo-elements.
2.
The CSS Box Model
Each box has a
content area
(which contains its content—text, descendant boxes, an image or other
replaced element
content, etc.)
and optional surrounding
padding
border
and
margin areas
the size of each area is specified by corresponding properties,
and can be zero
(or in the case of margins, negative).
The following diagram shows how these areas relate
and the terminology used to refer to the various parts of the box:
The various areas and edges of a typical box.
The background of the content, padding, and border areas of a box
is specified by its
background
properties.
The border area can additionally be painted with a border style
using the
border
properties.
Margins are always transparent.
See
[css-backgrounds-3]
The margin, border, and padding can be broken down into
top, right, bottom, and left segments,
each of which can be controlled independently
by its corresponding property.
2.1.
Boxes and Edges
The perimeter of each of the four areas
(content, padding, border, and margin)
is called an
edge
and each
edge
can be broken down into
a top, right, bottom, and left side.
Thus each
box
has four
edges
each composed of four sides:
content edge
or
inner edge
The content edge surrounds
the rectangle given by the width and height of the box,
which often depend on the element’s content
and/or its
containing block
size.
The four sides of the
content edge
together
define the box’s
content box
padding edge
The padding edge surrounds
the box’s padding.
If the padding has zero width on a given side,
the padding edge coincides with the content edge on that side.
The four sides of the
padding edge
together
define the box’s
padding box
which contains both the
content
and
padding areas
border edge
The border edge surrounds the box’s border.
If the border has zero width on a given side,
the border edge coincides with the padding edge on that side.
The four sides of the
border edge
together
define the box’s
border box
which contains the box’s
content
padding
and
border areas
margin edge
or
outer edge
The margin edge surrounds the box’s margin.
If the margin has zero width on a given side,
the margin edge coincides with the border edge on that side.
The four sides of the
margin edge
together
define the box’s
margin box
which contains the all of the box’s
content
padding
border
and
margin areas
Properties like
border-radius
can change the shape of the box’s
edges
as used for painting and clipping (see
CSS Backgrounds 3
§ 4.3 Corner Clipping
);
these effects typically do not affect layout however.
To distinguish, specifications can refer to the relevant
shaped edge
or
unshaped edge
2.2.
Fragmentation
When a box
fragments
—is broken, as across lines or across pages, into separate
box fragments
—each of its boxes
content box
padding box
border box
margin box
also fragments.
How the content/padding/border/margin areas react to fragmentation
is specified in
[css-break-4]
and controlled by the
box-decoration-break
property.
2.3.
Box-edge Keywords
The following
CSS keywords are defined for use
in properties (such as
transform-box
and
background-clip
that need to refer to various box edges:
content-box
Refers to the
content box
or
content edge
(In an SVG context, treated as
fill-box
.)
padding-box
Refers to the
padding box
or
padding edge
(In an SVG context, treated as
fill-box
.)
border-box
Refers to the
border box
or
border edge
(In an SVG context, treated as
stroke-box
.)
margin-box
Refers to the
margin box
or
margin edge
(In an SVG context, treated as
stroke-box
.)
fill-box
Refers to the
object bounding box
or its edges.
(In a CSS box context, treated as
content-box
.)
stroke-box
Refers to the
stroke bounding box
or its edges.
(In a CSS box context, treated as
border-box
.)
view-box
Refers to the nearest
SVG viewport
’s
origin box
which is a rectangle with the width and height
of the
SVG viewport
positioned such that its top left corner is anchored
at the coordinate system origin.
(In a CSS box context, treated as
border-box
.)
Note:
When the
SVG viewport
is not itself anchored at the origin,
this
origin box
does not actually correspond
to the
SVG viewport
For convenience, the following value types are defined
to represents commonly used subsets of
= content-box
padding-box
border-box
margin-box
fill-box
stroke-box
view-box
3.
Margins
Margins
surround the border edge of a box,
providing spacing between boxes.
The
margin properties
specify the thickness
of the
margin area
of a box.
The
margin
shorthand property
sets the margin for all four sides
while the margin
longhand properties
only set their respective side.
This specification defines the
physical
margin
longhands
CSS Logical Properties 1
§ 4.2 Flow-Relative Margins: the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands
additionally
defines
flow-relative
margin
longhands
Both sets of properties control the same set of margins:
they are just different ways of indexing each side.
Note:
Adjoining margins in
block layout
collapse
See
CSS2§8.3.1 Collapsing Margins
for details.
Also, margins adjoining a
fragmentation break
are sometimes truncated.
See
CSS Fragmentation 4
§ 5.2 Adjoining Margins at Breaks: the margin-break property
for details.
3.1.
Page-relative (Physical) Margin Properties: the
margin-top
margin-right
margin-bottom
, and
margin-left
properties
Name:
margin-top
margin-right
margin-bottom
margin-left
Value:
auto
Initial:
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
value
Canonical order:
per grammar
Animation type:
by computed value type
Logical property group:
margin
These properties set the top, right, bottom, and left
margin
of a
box
, respectively.
Negative values for margin properties are allowed,
but there may be implementation-specific limits.
3.2.
Margin Shorthand: the
margin
property
Name:
margin
Value:
<'margin-top'>
{1,4}
Initial:
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
The
margin
property is a shorthand property for setting
margin-top
margin-right
margin-bottom
, and
margin-left
in a single declaration.
If there is only one component value,
it applies to all sides.
If there are two values,
the top and bottom margins are set to the first value
and the right and left margins are set to the second.
If there are three values,
the top is set to the first value,
the left and right are set to the second,
and the bottom is set to the third.
If there are four values
they apply to the top, right, bottom, and left, respectively.
The following code demonstrates some possible
margin
declarations.
body { margin: 2em } /* all margins set to 2em */
body { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
The last rule of the example above is equivalent to the example below:
body {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* copied from opposite side (right) */
3.3.
Margins at Container Edges: the
margin-trim
property
Name:
margin-trim
Value:
none
[ block
||
inline ]
[ block-start
||
inline-start
||
block-end
||
inline-end ]
Initial:
none
Applies to:
block containers
multi-column containers
flex containers
grid containers
Inherited:
no
Percentages:
N/A
Computed value:
a set of zero to four keywords indicating which sides to trim
Canonical order:
per grammar
Animation type:
discrete
Oftentimes, margins are desired between siblings,
but not at the start/end of the container
where spacing can be controlled with padding.
This property allows the container
to trim the margins of its children
where they adjoin the container’s edges.
Values have the following meanings:
none
Margins are not trimmed by the container.
Note:
However, in block layout,
child margins can collapse with their parent.
See
CSS2§8.3.1: Collapsing Margins
block-start
block-end
For
in-flow
boxes contained by this box,
margins adjacent to the box’s specified edges
are truncated to zero.
It also truncates any descendant margins collapsed with such a margin
(but not its own, its siblings’, or its ancestors’).
inline-start
inline-end
For
in-flow
boxes contained by this box,
margins adjacent to the box’s specified edges
are truncated to zero.
(However, these values do not apply to
block containers
block
Computes to
block-start block-end
inline
Computes to
inline-start inline-end
Note:
Following the shortest-serialization principle,
computed values
equivalent to
block
or
inline
will serialize as those keywords.
Adjacency is not sensitive to space governed by box alignment
[CSS-ALIGN-3]
and ignores collapsed boxes (see
CSS Flexbox 1
§ 4.4 Collapsed Items
and tracks (
CSS Grid Layout 1
§ 7.2.3.2 Repeat-to-fill: auto-fill and auto-fit repetitions
).
Note:
See also the
margin-break
property,
which applies to the box’s own margins
when they adjoin a
fragmentation break
(page break / column break / etc.).
Define how this property affects margins at breaks
if the box establishes a
fragmentation context
See also
Issue 3314
Note:
This property has no effect on the margins of floats
when specified on a
block container
a future level of this module may introduce specific controls for floats.
3.3.1.
Trimming Block Container Content
For
block containers
specifically,
margin-trim
discards:
The block-start margin of a block-level first child,
when trimming at the block-start edge.
The block-end margin of a block-level last child,
when trimming at the block-end edge.
Any margin collapsed with these margins.
It has no effect on the
inline-axis
margins of
block-level
descendants,
nor on any margins of
inline-level
descendants.
3.3.2.
Trimming Flex Container Content
For
flex containers
specifically,
margin-trim
discards
the corresponding margin of each
flex item
on the closest
flex line
when trimming an edge parallel to the
main axis
the corresponding margin of the first/last
flex item
on each
flex line
when trimming an edge parallel to the
cross axis
This process ignores any
collapsed flex items
3.3.3.
Trimming Grid Container Content
For
grid containers
specifically,
margin-trim
discards
the corresponding margin of each
grid item
in the
grid track
adjacent to the relevant
box edge
This process ignores any
collapsed grid tracks
It does not otherwise ignore any empty
grid tracks
4.
Padding
Padding
is inserted between the content edge
and the padding edge of a box,
providing spacing between the content and the border.
The
padding properties
specify the thickness
of the
padding area
of a box.
The
padding
shorthand property
sets the padding for all four sides
while the padding
longhand properties
only set their respective side.
This specification defines the
physical
padding
longhands
CSS Logical Properties 1
§ 4.4 Flow-Relative Padding: the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands
additionally
defines
flow-relative
padding
longhands
Both sets of properties control the same set of padding:
they are just different ways of indexing each side.
Note:
Backgrounds specified on the box
are by default laid out and painted within the padding edges.
(They are additionally painted underneath the border,
in the
border area
.)
This behavior can be adjusted
using the
background-origin
and
background-clip
properties.
4.1.
Page-relative (Physical) Padding Properties: the
padding-top
padding-right
padding-bottom
, and
padding-left
properties
Name:
padding-top
padding-right
padding-bottom
padding-left
Value:
Initial:
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
value
Canonical order:
per grammar
Animation type:
by computed value type
Logical property group:
padding
These properties set the top, right, bottom, and left
padding
of a
box
, respectively.
Negative values for padding properties are invalid.
4.2.
Padding Shorthand: the
padding
property
Name:
padding
Value:
<'padding-top'>
{1,4}
Initial:
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
The
padding
property is a shorthand property for setting
padding-top
padding-right
padding-bottom
, and
padding-left
in a single declaration.
If there is only one component value,
it applies to all sides.
If there are two values,
the top and bottom padding are set to the first value
and the right and left padding are set to the second.
If there are three values,
the top is set to the first value,
the left and right are set to the second,
and the bottom is set to the third.
The following code demonstrates some possible
padding
declarations.
body { padding: 2em } /* all padding set to 2em */
body { padding: 1em 2em } /* top & bottom = 1em, right & left = 2em */
body { padding: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
The last rule of the example above is equivalent to the example below:
body {
padding-top: 1em;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 2em; /* copied from opposite side (right) */
5.
Borders
Borders
fill the
border area
to visually delineate the edges of the box,
The
border properties
specify the thickness
of the
border area
of a box,
as well as its drawing style and color.
See
CSS Backgrounds 3
§ 3 Borders
for the definition
of the physical variants of these properties;
CSS Logical Properties 1
§ 4.5 Flow-Relative Borders
additionally
defines
flow-relative
border
longhands
Both sets of properties control the same set of borders:
they are just different ways of indexing each side.
6.
Recent Changes
Changes since the
1 April 2024 Working Draft
include:
Allowing combining the
block
and
inline
keywords of
margin-trim
Issue 7884
Introducing the
shaped edge
and
unshaped edge
terms for easier cross-referencing of those concepts.
Issue 5132
Changes since the
3 November 2022 Working Draft
include:
Removing the effect of
margin-trim
on floats,
because there are use cases for both trimming and not trimming their margins,
and it is complicated to implement.
Issue 8547
Clarifying that only descendant margins are trimmed by
margin-trim
even if self or sibling margins would have collapsed with the trimmed margin.
Introducing terms for the
shaped
and
unshaped
edges
of a
box
Issue 5132
7.
Changes Since CSS Level 3
The following changes have been made to this module
since
Level 3
Adding the
margin-trim
property.
8.
Changes Since CSS Level 2
The following changes have been made to this module
since
Level 2
Adapting the prose slightly to account for vertical
writing modes
Defining the applicability of
margin
padding
and their longhands to
ruby base containers
and
ruby annotation containers
9.
Privacy Considerations
No privacy considerations have been reported on this module.
10.
Security Considerations
No security considerations have been reported on this module.
Conformance
Document conventions
Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes.
[RFC2119]
Examples in this specification are introduced with the words “for example”
or are set apart from the normative text with
class="example"
like this:
This is an example of an informative example.
Informative notes begin with the word “Note” and are set apart from the
normative text with
class="note"
, like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with
, like
this:
UAs MUST provide an accessible alternative.
Tests
Tests relating to the content of this specification
may be documented in “Tests” blocks like this one.
Any such block is non-normative.
Conformance classes
Conformance to this specification
is defined for three conformance classes:
style sheet
CSS
style sheet
renderer
UA
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
UA
that writes a style sheet.
A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
Partial implementations
So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers
must
treat as invalid (and
ignore
as appropriate
) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents
must not
selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored.
Implementations of Unstable and Proprietary Features
To avoid clashes with future stable CSS features,
the CSSWG recommends
following best practices
for the implementation of
unstable
features and
proprietary extensions
to CSS.
Non-experimental implementations
Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group.
Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
Index
Terms defined by this specification
block
, in § 3.3
block-end
, in § 3.3
block-start
, in § 3.3
border
, in § 5
border area
, in § 2
border box
, in § 2.1
border-box
, in § 2.3
border edge
, in § 2.1
border properties
, in § 5
, in § 2.3
box edge
, in § 2.1
content area
, in § 2
content box
, in § 2.1
content-box
, in § 2.3
content edge
, in § 2.1
, in § 2.3
edge
, in § 2.1
fill-box
, in § 2.3
inline
, in § 3.3
inline-end
, in § 3.3
inline-start
, in § 3.3
inner edge
, in § 2.1
, in § 2.3
margin
(property)
, in § 3.2
definition of
, in § 3
margin area
, in § 2
margin-bottom
, in § 3.1
margin box
, in § 2.1
margin-box
, in § 2.3
margin edge
, in § 2.1
margin-left
, in § 3.1
margin properties
, in § 3
margin-right
, in § 3.1
margin-top
, in § 3.1
margin-trim
, in § 3.3
none
, in § 3.3
origin box
, in § 2.3
outer edge
, in § 2.1
Padding
, in § 4
padding
, in § 4.2
padding area
, in § 2
padding-bottom
, in § 4.1
padding box
, in § 2.1
padding-box
, in § 2.3
padding edge
, in § 2.1
padding-left
, in § 4.1
padding properties
, in § 4
padding-right
, in § 4.1
padding-top
, in § 4.1
, in § 2.3
shaped border edge
, in § 2.1
shaped content edge
, in § 2.1
shaped edge
, in § 2.1
shaped margin edge
, in § 2.1
shaped padding edge
, in § 2.1
stroke-box
, in § 2.3
SVG viewport origin box
, in § 2.3
unshaped border edge
, in § 2.1
unshaped content edge
, in § 2.1
unshaped edge
, in § 2.1
unshaped margin edge
, in § 2.1
unshaped padding edge
, in § 2.1
view-box
, in § 2.3
, in § 2.3
Terms defined by reference
[CSS-BACKGROUNDS-3]
defines the following terms:
background
background-clip
background-origin
[CSS-BORDERS-4]
defines the following terms:
border
border-radius
[CSS-BREAK-4]
defines the following terms:
box fragment
box-decoration-break
fragmentation break
fragmentation context
margin-break
[CSS-CASCADE-5]
defines the following terms:
computed value
longhand
longhand property
shorthand property
[CSS-DISPLAY-4]
defines the following terms:
block container
block layout
block-level
box
box tree
containing block
element tree
in-flow
inline-level
internal table element
replaced element
[CSS-FLEXBOX-1]
defines the following terms:
collapsed flex item
cross axis
flex container
flex item
flex line
main axis
[CSS-GRID-2]
defines the following terms:
collapsed grid track
grid container
grid item
grid track
[CSS-MULTICOL-2]
defines the following terms:
multi-column container
[CSS-PSEUDO-4]
defines the following terms:
::first-letter
::first-line
[CSS-RUBY-1]
defines the following terms:
ruby annotation container
ruby base container
[CSS-SIZING-3]
defines the following terms:
sizing property
[CSS-TRANSFORMS-1]
defines the following terms:
transform-box
[CSS-VALUES-4]
defines the following terms:
CSS-wide keywords
{A,B}
||
[CSS-WRITING-MODES-4]
defines the following terms:
flow-relative
inline-axis
logical width
physical
writing mode
[SVG2]
defines the following terms:
canvas
object bounding box
stroke bounding box
SVG viewports
References
Normative References
[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr..
CSS Box Alignment Module Level 3
. URL:
[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper.
CSS Backgrounds and Borders Module Level 3
. URL:
[CSS-BORDERS-4]
Elika Etemad; et al.
CSS Borders and Box Decorations Module Level 4
. URL:
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad.
CSS Fragmentation Module Level 4
. URL:
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr..
CSS Cascading and Inheritance Level 5
. URL:
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr..
CSS Display Module Level 4
. URL:
[CSS-FLEXBOX-1]
Elika Etemad; Tab Atkins Jr.; Rossen Atanassov.
CSS Flexible Box Layout Module Level 1
. URL:
[CSS-GRID-1]
Tab Atkins Jr.; et al.
CSS Grid Layout Module Level 1
. URL:
[CSS-GRID-2]
Tab Atkins Jr.; et al.
CSS Grid Layout Module Level 2
. URL:
[CSS-LOGICAL-1]
Elika Etemad; Rossen Atanassov.
CSS Logical Properties and Values Module Level 1
. URL:
[CSS-MULTICOL-2]
Florian Rivoal; Rachel Andrew.
CSS Multi-column Layout Module Level 2
. URL:
[CSS-PSEUDO-4]
Elika Etemad; Alan Stearns.
CSS Pseudo-Elements Module Level 4
. URL:
[CSS-RUBY-1]
Elika Etemad; et al.
CSS Ruby Annotation Layout Module Level 1
. URL:
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad.
CSS Box Sizing Module Level 3
. URL:
[CSS-TRANSFORMS-1]
Simon Fraser; et al.
CSS Transforms Module Level 1
. URL:
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 3
. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. URL:
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 4
. URL:
[CSS2]
Bert Bos; et al.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
[SVG2]
Amelia Bellamy-Royds; et al.
Scalable Vector Graphics (SVG) 2
. URL:
Non-Normative References
[CSS-DISPLAY-3]
Elika Etemad; Tab Atkins Jr..
CSS Display Module Level 3
. URL:
Property Index
Name
Value
Initial
Applies to
Inh.
%ages
Animation type
Canonical order
Computed value
Logical property group
margin
<'margin-top'>{1,4}
all elements except internal table elements, ruby base containers, and ruby annotation containers
no
refer to logical width of containing block
by computed value type
per grammar
see individual properties
margin-bottom
all elements except internal table elements, ruby base containers, and ruby annotation containers
no
refer to logical width of containing block
by computed value type
per grammar
the keyword auto or a computed
margin
margin-left
all elements except internal table elements, ruby base containers, and ruby annotation containers
no
refer to logical width of containing block
by computed value type
per grammar
the keyword auto or a computed
margin
margin-right
all elements except internal table elements, ruby base containers, and ruby annotation containers
no
refer to logical width of containing block
by computed value type
per grammar
the keyword auto or a computed
margin
margin-top
all elements except internal table elements, ruby base containers, and ruby annotation containers
no
refer to logical width of containing block
by computed value type
per grammar
the keyword auto or a computed
margin
margin-trim
none | [ block || inline ] | [ block-start || inline-start || block-end || inline-end ]
none
block containers, multi-column containers, flex containers, grid containers
no
N/A
discrete
per grammar
a set of zero to four keywords indicating which sides to trim
padding
<'padding-top'>{1,4}
all elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers
no
refer to logical width of containing block
by computed value type
per grammar
see individual properties
padding-bottom
all elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers
no
refer to logical width of containing block
by computed value type
per grammar
a computed
padding
padding-left
all elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers
no
refer to logical width of containing block
by computed value type
per grammar
a computed
padding
padding-right
all elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers
no
refer to logical width of containing block
by computed value type
per grammar
a computed
padding
padding-top
all elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers
no
refer to logical width of containing block
by computed value type
per grammar
a computed
padding
Issues Index
Define how this property affects margins at breaks
if the box establishes a
fragmentation context
See also
Issue 3314
MDN
margin-trim
In only one current engine.
Firefox
None
Safari
16.4+
Chrome
None
Opera
Edge
None
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
US