CSS margin-block property

Description

It is a logical property that defines space at the start and end sides of a block. The selection of start side depends on the writing-mode.

It behaves like margin-top and margin-bottom for the horizontal-tb writing mode.
It behaves like margin-right and margin-left for the vertical-* writing-mode respectively.

Change the direction of flow of text.

horizontal-tb vertical-lr vertical-rl

margin-block : margin-block-start margin-block-end

lengthDefault 0: Both the margin-block-start and margin-block-end are set to 0px.; margin-block: 0px;
Try it
length 20: Both the margin-block-start and margin-block-end are 20px.; margin-block: 20px;
Try it
length length 40: The margin-block-start and margin-block-end values are 20px and 40px respectively.; margin-block: 20px 40px;
Try it

It applies to all elements

Code

CSS

.element{
width:120px;
height:120px;
background-color:rgba(220,220,220,0.5);
float:left;
}

HTML

<div class="element">
   Check the behavior of margin-block-start for different values of writing mode.
 </div>	
 content after the block