CSS block-size ιδιότητα

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 attribute value of the <div> element is set to vertical-rl, the block direction changes from downward to horizontal, which changes 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 Specifies block-size in units such as px, pt, cm, etc. Also see:Μονάδες CSS.
% Specifies 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 Creation: Supported. See:Animation-related Properties.
Version: CSS3
JavaScript Syntax: object.style.blockSize="100px"

Browser Support

The numbers in the table represent the first browser version to fully support this attribute.

Chrome Edge Firefox Safari Opera
57.0 79.0 41.0 12.1 44.0

Related Pages

CSS Tutorial:CSS ύψος και πλάτος

CSS Tutorial:CSS πλαίσιο μοντέλο

CSS Reference:height attribute

CSS Reference:width attribute

CSS Reference:writing-mode attribute