码农教程 - 一技在手,衣食无忧! tools

目录

CSS margin-block-end Property

❮ Previous Complete CSS Reference Next ❯

Example

Set the margin at the end in the block direction:

div {
  margin-block-end: 35px;
}
Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The margin-block-end property specifies the margin at the end in the block direction.

The CSS margin-block and margin-inline properties are very similar to CSS properties margin-top, margin-bottom, margin-left and margin-right, but the margin-block and margin-inline properties are dependent on block and inline directions.

Note: The related CSS property writing-mode defines block direction. This affects where the start and end of a block is and the result of the margin-block-end property. For pages in English, block direction is downward and inline direction is left to right.

Show demo ❯

Default value: auto
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.marginBlockEnd="20px" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
margin-block-end 87.0 87.0 41.0 12.1 73.0

CSS Syntax

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

Property Values

Value Description Demo
auto Default. The element's default margin. Demo ❯
length Specifies distance in px, pt, cm, etc. Negative values are allowed. Read about length units Demo ❯
% Specifies distance in percent relative to size of parent element in the inline direction. Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

With the writing-mode property value of a <div> element set to vertical-rl, the block direction is right to left. The result is that the end of the element is moved from bottom to left side. So, a change in writing-mode also changes the effect from margin-block-end:

#parentDiv {
  writing-mode: vertical-rl;
}

#myDiv {
  margin-block-end: 50px;
}
Try it Yourself »

Related Pages

CSS margin-block property: CSS Margin-block property

CSS margin-block-start property: CSS Margin-block-start property

CSS margin-bottom property: CSS Margin-bottom property

CSS margin-inline property: CSS Margin-inline

CSS margin-left property: CSS Margin-left

CSS margin-right property: CSS Margin-right

CSS margin-top property: CSS Margin-top

CSS writing-mode property: CSS Writing-mode property


❮ Previous Complete CSS Reference Next ❯