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.
Try it
Syntax
css
/* <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: revert-layer;
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
inline-size =
<'width'>
Examples
Setting inline size in pixels
HTML
html
<p class="exampleText">Example text</p>
CSS
css
.exampleText {
writing-mode: vertical-rl;
background-color: yellow;
inline-size: 110px;
}
Result
Specifications
Specification |
---|
CSS Logical Properties and Values Level 1 # dimension-properties |
Browser compatibility
BCD tables only load in the browser
See also
- The mapped physical properties:
width
andheight
writing-mode