CSS block-size attribute

Previous Page background-size
Next Page border

Definition and Usage

block-size The attribute specifies the size of the element in the block direction.

Note:related CSS properties writing-mode Defines the block direction, which affects block-size attributes. For English pages, the block direction is downward, and the inline direction is from left to right.

CSS's block-size and inline-size attributes are related to the result of CSS's width and height attributes are very similar, but block-size and inline-size The attribute depends on the block direction and inline direction.

Example

Example 1

Set the size of the <div> element in the block direction:

div {
  block-size: 200px;
}

Try It Yourself

Example 2

When the writing-mode property value of the <div> element is set to vertical-rl, the block direction changes from downward to horizontal, which will change the direction of the block-size attribute:

div {
  block-size: 250px;
  writing-mode: vertical-rl;
}

Try It Yourself

CSS Syntax

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

Attribute Value

Value	Description
auto	Default. The default block-size value of the element.
length	Specify block-size in units such as px, pt, cm, etc. Also see:CSS Units.
%	Specify block-size as a percentage of the corresponding axis size relative to the parent element.
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 Making:	Supported. See:Animation-related Properties.
Version:	CSS3
JavaScript Syntax:	object.style.blockSize="100px"