CSS margin-block property

Previous Page margin
Next Page margin-block-end

Definition and Usage

margin-block This property specifies the outer margin of the starting and ending edges in the block direction and is an abbreviation for the following properties:

margin-block-start
margin-block-end

margin-block The value of the property can be set in different ways:

If the margin-block property has two values:

margin-block: 10px 50px;

The outer margin of the starting edge is 10px
The outer margin of the ending edge is 50px

If the margin-block property has a value:

margin-block: 10px;

The starting and ending edges of the margin are both 10px

CSS's margin-block and margin-inline properties are consistent with CSS's margin-top,margin-bottom,margin-left and margin-right The properties are very similar, but margin-block and margin-inline The property depends on the block direction and inline direction.

Note:related CSS properties writing-mode Defines the block direction. This affects the starting and ending positions of the block and margin-block The result of the property. For English pages, the block direction is downward, and the inline direction is from left to right.

Example

Example 1

Sets the outer margins on both sides of the block direction:

div {
  margin-block: 35px;
}

Try It Yourself

Example 2

When the <div> element's writing-mode When the attribute value is set to vertical-rl, the starting position of the element in the block direction moves from the top to the right, and the ending position of the element moves from the bottom to the left. The change in writing-mode also affects the effect of margin-block:

#parentDiv {
  writing-mode: vertical-rl;
}
#myDiv {
  margin-block: 10px 50px;
}

Try It Yourself

CSS Syntax

margin-block: auto|length|initial|inherit;

Property Value

Value	Description
auto	Default Value. The default margin-block value of the element.
length	Specify margin-block in units such as px, pt, cm, etc. Negative values are allowed. Refer to:CSS Units.
%	Specifies the percentage of the margin-block relative to the size of the parent element in the inline direction.
initial	Sets this property to its default value. Refer to initial.
inherit	Inherits this property from its parent element. Refer to inherit.

Technical Details

Default Value:	auto
Inheritance:	No
Animation Creation:	Supported. Refer to:Animation-related properties.
Version:	CSS3
JavaScript Syntax:	object.style.marginBlock="50px 20px"