This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
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.
/* <length> values */ block-size: 300px; block-size: 25em; /* <percentage> values */ block-size: 75%; /* Keyword values */ block-size: 25em border-box; block-size: 75% content-box; block-size: max-content; block-size: min-content; block-size: available; block-size: fit-content; block-size: auto; /* Global values */ block-size: inherit; block-size: initial; block-size: unset;
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.
| Initial value | auto |
|---|---|
| Applies to | same as width and height |
| Inherited | no |
| Percentages | block-size of containing block |
| Media | visual |
| Computed value | same as width and height |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Values
The block-size property takes the same values as the width and height properties.
Formal syntax
<'width'>
Example
HTML
<p class="exampleText">Example text</p>
CSS
.exampleText {
writing-mode: vertical-rl;
background-color: yellow;
block-size: 200px;
}
Specification
| Specification | Status | Comment |
|---|---|---|
| CSS Logical Properties Level 1 The definition of 'block-size' in that specification. |
Editor's Draft | Initial definition |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | No support | 41.0 (41.0)[1] | No support | No support | No support |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | No support | 41.0 (41.0)[1] | No support | No support | No support |
[1] Available since Gecko 38, but behind the preference layout.css.vertical-text.enabled, then disabled by default. The preference has been removed in Gecko 51 and this property cannot be disabled since this version.
See also
- The mapped physical properties:
widthandheight writing-mode