{{CSSRef}}{{SeeCompatTable}}
Summary
The inline-size
CSS property defines the horizontal or vertical size of an element's block depending on its writing mode. It corresponds to the {{cssxref("width")}} or the {{cssxref("height")}} property depending on the value defined for {{cssxref("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. It relates to {{cssxref("block-size")}}, which defines the other dimension of the element.
{{cssinfo}}
Syntax
/* <length> values */ inline-size: 300px; inline-size: 25em; /* <percentage> values */ inline-size: 75%; /* Keyword values */ inline-size: border-box; inline-size: content-box; inline-size: max-content; inline-size: min-content; inline-size: available; inline-size: fit-content; 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 {{cssxref("width")}} and {{cssxref("height")}} properties.
Formal syntax
{{csssyntax}}
Example
HTML Content
<p class="exampleText">Example text</p>
CSS Content
.exampleText { writing-mode: vertical-rl; background-color: yellow; inline-size: 110px; }
{{EmbedLiveSample("Example")}}
Specification
Specification | Status | Comment |
---|---|---|
{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "inline-size")}} | {{Spec2("CSS Logical Properties")}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatGeckoDesktop("41.0")}}[1] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatGeckoMobile("41.0") }}[1] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
[1] Available since Gecko 38, but behind the preference layout.css.vertical-text.enabled
, then disabled by default.
See also
- The mapped physical properties: {{cssxref("width")}} and {{cssxref("height")}}
- {{cssxref("writing-mode")}}