block-size
Quick Summary for block-size
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.
Code Usage for block-size
<pre class="brush: css notranslate"><code><span class="token comment">/ <length> values /</span> <span class="token property">block-size</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span> <span class="token property">block-size</span><span class="token punctuation">:</span> 25em<span class="token punctuation">;</span> <span class="token comment">/ <percentage> values /</span> <span class="token property">block-size</span><span class="token punctuation">:</span> 75%<span class="token punctuation">;</span> <span class="token comment">/ Keyword values /</span> <span class="token property">block-size</span><span class="token punctuation">:</span> max-content<span class="token punctuation">;</span> <span class="token property">block-size</span><span class="token punctuation">:</span> min-content<span class="token punctuation">;</span> <span class="token property">block-size</span><span class="token punctuation">:</span> <span class="token function">fit-content</span><span class="token punctuation">(</span>20em<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">block-size</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">block-size</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">block-size</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">block-size</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">block-size</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>
More Details for block-size
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.
Syntax
/* <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: unset; Values
The block-size property takes the same values as the width and height properties.
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
<'width'>
Examples
Block size with vertical text
HTML<p class="exampleText">Example text</p> .exampleText { writing-mode: vertical-rl; background-color: yellow; block-size: 200px; } Specifications
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # dimension-properties |
See also
The mapped physical properties:width and height writing-mode Last modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)EspañolFrançais日本語Português (do Brasil)Русский中文 (简体) Change languageAdd Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
