CSS margin-block-start property

Previous Page margin-block-end
Next Page margin-bottom

Definition and Usage

margin-block-start property specifies the margin at the start of the block direction.

CSS's margin-block and margin-inline properties are related to CSS's margin-top,margin-bottom,margin-left and margin-right 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 This defines the block direction. It affects the starting and ending positions of the block and the result of the margin-block-start property. For English pages, the block direction is downward, and the inline direction is from left to right.

Example

Example 1

Sets the margin at the start of the block direction:

div {
  margin-block-start: 35px;
}

Try It Yourself

Example 2

When the <div> element's writing-mode When the property value is set to vertical-rl, the block direction is from right to left. As a result, the starting position of the element moves to the right from the top. Therefore, the change of writing-mode will also affect margin-block-start Effect:

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

Try It Yourself

CSS Syntax

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

Property Value

Value	Description
auto	Default Value. The default margin distance of the element.
length	Specifies the distance, in units such as px, pt, cm, etc. Negative values are allowed. Refer to:CSS Units.
%	Specifies the percentage distance 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.marginBlockStart="100px"