1. css
  2. /properties
  3. /inline-size

inline-size

Definition

The inline-size property is used to specify the width of an element in a horizontal writing mode. It determines the width of the content box of the element when its display property is set to inline or inline-block.

Examples

This sets the inline-size of all <div> elements to 300px:

  div {
  inline-size: 300px;
}

This sets the inline-size of all <img> elements to 100% of the width of their containing block:

  img {
  inline-size: 100%;
}

his sets the inline-size of all <span> elements to the size of their contents:

span {
  inline-size: fit-content;
}

Values

ValueDescription
autoThe default value. The element's width is determined by its content.
<length>Specifies a fixed width in a specified CSS length unit.
<percentage>Specifies a width as a percentage of the containing block's width.
fit-contentSpecifies a width that fits the element's content.
max-contentSpecifies a width that is the maximum of the element's content, padding, and border.
min-contentSpecifies a width that is the minimum of the element's content, padding, and border.

Best Practices

  • Use relative units like em, rem, and % instead of absolute units like px to create responsive designs that adapt to different screen sizes.
  • Use max-width and min-width in conjunction with inline-size to create responsive layouts that adjust to different screen sizes.
  • Use the fit-content, max-content, and min-content values to size elements based on their content rather than fixed pixel values.
  • Avoid using inline-size to set the width of block-level elements as it may not behave as expected in all browsers.
  • Use box-sizing: border-box; to include padding and borders in the inline-size calculation, ensuring consistent sizing of elements.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes