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.
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;
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 1The definition of 'inline-size' in that specification. | Editor's Draft | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
inline-size
|
Chrome
Full support 57 |
Edge
Full support 79 |
Firefox Full support 41 Full support 41 No support 38 — 51 Disabled' From version 38 until version 51 (exclusive): this feature is behind the |
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 Full support 41 No support 38 — 51 Disabled' From version 38 until version 51 (exclusive): this feature is behind the |
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 Full support 38 Prefixed' Implemented with the vendor prefix: -moz- |
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 Full support 38 Prefixed' Implemented with the vendor prefix: -moz- |
Opera Android
Full support 43 |
Safari iOS
Full support 12.2 |
Samsung Internet Android Full support 5.0 Full support 5.0 Alternate Name' Uses the non-standard name: |
max-content
|
Chrome
Full support 57 |
Edge
Full support 79 |
Firefox Full support 66 Full support 66 Full support 41 Prefixed' Implemented with the vendor prefix: -moz- |
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 Full support 66 Full support 41 Prefixed' Implemented with the vendor prefix: -moz- |
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 Full support 66 Full support 41 Prefixed' Implemented with the vendor prefix: -moz- |
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 Full support 66 Full support 41 Prefixed' Implemented with the vendor prefix: -moz- |
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
inline-size by Mozilla Contributors is licensed under CC-BY-SA 2.5.