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
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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: unset;
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.
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>
CSS
.exampleText { writing-mode: vertical-rl; background-color: yellow; inline-size: 110px; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Logical Properties and Values Level 1 The definition of 'inline-size' in that specification. |
Editor's Draft | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
inline-size | Chrome Full support 57 | Edge Full support 79 | Firefox
Full support
41
| IE No support No | Opera Full support 44 | Safari Full support 12.1 | WebView Android Full support 57 | Chrome Android Full support 57 | Firefox Android
Full support
41
| Opera Android Full support 43 | Safari iOS Full support 12.2 | Samsung Internet Android Full support 5.0 |
fit-content | Chrome Full support 57 | Edge Full support 79 | Firefox
Full support
38
| IE No support No | Opera Full support 44 | Safari Full support 12.1 | WebView Android Full support 57 | Chrome Android Full support 57 | Firefox Android
Full support
38
| Opera Android Full support 43 | Safari iOS Full support 12.2 | Samsung Internet Android
Full support
5.0
|
max-content | Chrome Full support 57 | Edge Full support 79 | Firefox
Full support
66
| IE No support No | Opera Full support 44 | Safari Full support 12.1 | WebView Android Full support 57 | Chrome Android Full support 57 | Firefox Android
Full support
66
| Opera Android Full support 43 | Safari iOS Full support 12.2 | Samsung Internet Android Full support 5.0 |
min-content | Chrome Full support 57 | Edge Full support 79 | Firefox
Full support
66
| IE No support No | Opera Full support 44 | Safari Full support 12.1 | WebView Android Full support 57 | Chrome Android Full support 57 | Firefox Android
Full support
66
| Opera Android Full support 43 | Safari iOS Full support 12.2 | Samsung Internet Android Full support 5.0 |
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
See also
- The mapped physical properties:
width
andheight
writing-mode