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.
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
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
BCD tables only load in the browser
See also
- The mapped physical properties:
width
andheight
writing-mode