CSS margin-block-end attribute

Previous Page margin-block
Next Page margin-block-start

Definition and Usage

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

CSS's margin-block and margin-inline properties are similar to CSS's margin-top,margin-bottom,margin-left and margin-right 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-end 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 margin at the end of the block direction:

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

Try It Yourself

Example 2

When the <div> element's writing-mode When the block direction is from right to left when the property value is set to vertical-rl, the result is that the ending position of the element moves from the bottom to the left. Therefore, the change of writing-mode will also affect the effect of margin-block-end:

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

Try It Yourself

CSS Syntax

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

Property Value

Value	Description
auto	Default Value. The default margin of the element.
length	Specifies the distance, in units such as px, pt, cm, etc. Negative values are allowed. See: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. See: initial.
inherit	Inherits this property from its parent element. See: inherit.

Technical Details

Default Value:	auto
Inheritance:	No
Animation Creation:	Supported. See:Animation-related Properties.
Version:	CSS3
JavaScript Syntax:	object.style.marginBlockEnd="20px"