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

block-size

Definition

In CSS, the block-size property specifies the size of an element in the block direction. The block direction is the direction in which the element's content flows, which is typically vertical in left-to-right languages such as English.

Examples

To set the block size of an element to a fixed length:

div {
  block-size: 200px;
}

To set the block size of an element to the minimum size required to fit its content:

div {
  block-size: min-content;
}

To set the block size of an element to the maximum size required to fit its content:

div {
  block-size: max-content;
}

To set the block size of an element to the size required to fit its content, but allow it to be larger if the element's container allows it:

div {
  block-size: fit-content;
}

To set the block size of an element based on the size of its container:

div {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  block-size: auto;
}

Values

ValueDescription
autoThe element's block size is determined by its content. This is the default value.
lengthThe element's block size is set to the specified length in pixels, percentages, or other units.
min-contentThe element's block size is set to the minimum size required to fit its content.
max-contentThe element's block size is set to the maximum size required to fit its content.
fit-contentThe element's block size is set to the size required to fit its content, but it can be larger if the element's container allows it.
initialSets the property to its default value.
inheritInherits the property from the parent element.

Best Practices

  • Use the auto value as the default value for most elements. This allows the element's block size to be determined by its content, which is usually the desired behavior.
  • Use the min-content or max-content values to specify a minimum or maximum block size for an element. This can be useful for preventing the element from becoming too small or too large, depending on the content.
  • Use the fit-content value to specify a block size that fits the content, but can be larger if the element's container allows it. This can be useful for creating flexible layouts that adjust to the size of the content.
  • Use the length value sparingly and with caution. Specifying a fixed block size may result in the element's content being truncated or overflowed if the content does not fit within the specified size.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes

Some older web browsers may not support the block-size property. In particular, Internet Explorer 11 and earlier versions do not support the block-size property.