CSS margin-block

Previous Next

Demo of the different values of the margin-block property.

Click the property values below to see the result:

margin-block: 0;
margin-block: 10px;
margin-block: -15px;
margin-block: 50px;
margin-block: auto;
margin-block: 5%;
margin-block: 10px 50px;

Red div elements are shown to highlight margin at the start and end of the blue div element in the block direction.

div
See this blue div element with different margin-block values.
div

Red div elements are shown to highlight margin at the start and end of the blue div element in the block direction.

div
See this blue div element with different margin-block values.
div

Red div elements are shown to highlight margin at the start and end of the blue div element in the block direction.

div
See this blue div element with different margin-block values.
div

Red div elements are shown to highlight margin at the start and end of the blue div element in the block direction.

div
See this blue div element with different margin-block values.
div

Red div elements are shown to highlight margin at the start and end of the blue div element in the block direction.

div
See this blue div element with different margin-block values.
div

Red div elements are shown to highlight margin at the start and end of the blue div element in the block direction.

div
See this blue div element with different margin-block values.
div

Red div elements are shown to highlight margin at the start and end of the blue div element in the block direction.

div
See this blue div element with different margin-block values.
div

Play more with the code in our Tryit yourself editor: Try it Yourself ❯