inline-size
Quick Summary for inline-size
inline-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 inline-size
<pre class="brush: css notranslate"><code><span class="token comment">/ <length> values /</span> <span class="token property">inline-size</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span> <span class="token property">inline-size</span><span class="token punctuation">:</span> 25em<span class="token punctuation">;</span> <span class="token comment">/ <percentage> values /</span> <span class="token property">inline-size</span><span class="token punctuation">:</span> 75%<span class="token punctuation">;</span> <span class="token comment">/ Keyword values /</span> <span class="token property">inline-size</span><span class="token punctuation">:</span> max-content<span class="token punctuation">;</span> <span class="token property">inline-size</span><span class="token punctuation">:</span> min-content<span class="token punctuation">;</span> <span class="token property">inline-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">inline-size</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">inline-size</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">inline-size</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">inline-size</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">inline-size</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>
More Details for inline-size
inline-size
The inline-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 inline-size relates to the height of the element; otherwise, it relates to the width of the element. A related property is block-size, which defines the other dimension of the element.
Syntax
/* <length> values */ inline-size: 300px; inline-size: 25em; /* <percentage> values */ inline-size: 75%; /* Keyword values */ inline-size: max-content; inline-size: min-content; inline-size: fit-content(20em); inline-size: auto; /* Global values */ inline-size: inherit; inline-size: initial; inline-size: revert; inline-size: unset; Values
The inline-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 | inline-size of containing block |
| Computed value | same as width and height |
| Animation type | a length, percentage or calc(); |
Formal syntax
<'width'>
Examples
Setting inline size in pixels
HTML<p class="exampleText">Example text</p> .exampleText { writing-mode: vertical-rl; background-color: yellow; inline-size: 110px; } 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
