inline-size
Quick Summary for 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
.
Code Usage for inline-size
/* <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;
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>
CSS .exampleText { writing-mode: vertical-rl; background-color: yellow; inline-size: 110px; }
ResultSpecifications
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 language Posted in
12:22 am, February 22, 2022
Add Comment
Other Items in CSS
rgb()
rgba()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
row-gap
ruby-align
ruby-position
saturate()
scale
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
@scroll-timeline