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.

When one value is specified, it applies the same margin to both start and end. When two values are specified, the first margin applies to the start, the second to the end.

Values

The margin-block property takes the same values as the margin property.

Formal definition

Initial value0
Applies tosame as margin
Inheritedno
Percentagesdepends on layout model
Computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
Animation typediscrete

Formal syntax

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

Examples

Setting block start and end margins

CSS
div {   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> 
Result

Specifications

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

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Treasure every moment that you have and treasure it more because you shared it with someone special, special enough to spend your time...and remember that time waits for no one.
Unknown
Random CSS Property

text-emphasis-position

The text-emphasis-position CSS property sets where emphasis marks are drawn. Like ruby text, if there isn't enough room for emphasis marks, the line height is increased.
text-emphasis-position css reference