block-size
The block-size
CSS property defines the horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the width
or the height
property, depending on the value of writing-mode
.
If the writing mode is vertically oriented, the value of block-size
relates to the width of the element; otherwise, it relates to the height of the element. A related property is inline-size
, which defines the other dimension of the element.
Try it
Syntax
css
/* <length> values */
block-size: 300px;
block-size: 25em;
/* <percentage> values */
block-size: 75%;
/* Keyword values */
block-size: max-content;
block-size: min-content;
block-size: fit-content(20em);
block-size: auto;
/* Global values */
block-size: inherit;
block-size: initial;
block-size: revert;
block-size: revert-layer;
block-size: unset;
Values
Formal definition
Initial value | auto |
---|---|
Applies to | same as width and height |
Inherited | no |
Percentages | block-size of containing block |
Computed value | same as width and height |
Animation type | a length, percentage or calc(); |
Formal syntax
block-size =
<'width'>
Examples
Block size with vertical text
HTML
html
<p class="exampleText">Example text</p>
CSS
css
.exampleText {
writing-mode: vertical-rl;
background-color: yellow;
block-size: 200px;
}
Result
Specifications
Specification |
---|
CSS Logical Properties and Values Level 1 # dimension-properties |
Browser compatibility
BCD tables only load in the browser
See also
- The mapped physical properties:
width
andheight
writing-mode