margin-block
Quick Summary for margin-block
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.
Code Usage for margin-block
/* <length> values */ margin-block: 10px 20px; /* An absolute length */ margin-block: 1em 2em; /* relative to the text size */ margin-block: 5% 2%; /* relative to the nearest block container's width */ margin-block: 10px; /* sets both start and end values */ /* Keyword values */ margin-block: auto; /* Global values */ margin-block: inherit; margin-block: initial; margin-block: revert; margin-block: unset;
More Details for margin-block
margin-block
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.
/* <length> values */ margin-block: 10px 20px; /* An absolute length */ margin-block: 1em 2em; /* relative to the text size */ margin-block: 5% 2%; /* relative to the nearest block container's width */ margin-block: 10px; /* sets both start and end values */ /* Keyword values */ margin-block: auto; /* Global values */ margin-block: inherit; margin-block: initial; margin-block: revert; margin-block: unset;
This property corresponds to the margin-top
and margin-bottom
, or the margin-right
and margin-left
properties, depending on the values defined for writing-mode
, direction
, and text-orientation
.
Constituent properties
This property is a shorthand for the following CSS properties:
margin-block-start
margin-block-end
Syntax
The margin-block
property may be specified using one or two values.
Values
The margin-block
property takes the same values as the margin
property.
Formal definition
Initial value | 0 |
---|---|
Applies to | same as margin |
Inherited | no |
Percentages | depends on layout model |
Computed value | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto |
Animation type | discrete |
Formal syntax
<'margin-left'>{1,2}
Examples
Setting block start and end margins
CSSdiv { background-color: yellow; width: 120px; height: auto; border: 1px solid green; } p { margin: 0; margin-block: 20px 40px; background-color: tan; } .verticalExample { writing-mode: vertical-rl; }
HTML <div> <p>Example text</p> </div> <div class="verticalExample"> <p>Example text</p> </div>
ResultSpecifications
Specification |
---|
CSS Logical Properties and Values Level 1 # propdef-margin-block |
See also
The mapped physical properties:margin-top
, margin-right
, margin-bottom
, and margin-left
writing-mode
, direction
, text-orientation
Last modified: Jan 7, 2022, by MDN contributors
Select your preferred language English (US)EspañolFrançais日本語中文 (简体) Change language Posted in
12:22 am, February 22, 2022
Add Comment
Other Items in CSS
rgb()
rgba()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
row-gap
ruby-align
ruby-position
saturate()
scale
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
@scroll-timeline