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

min-block-size

Definition

The min-block-size property sets the minimum height of a block-level element in horizontal writing mode or the minimum width of a block-level element in vertical writing mode. This property is used to ensure that an element has a minimum size even if it contains no content. The min-block-size property is often used with height and width to create a responsive design.

Examples

Setting a minimum height for a div element:

div {
  min-block-size: 100px;
}

Setting a minimum width for a div element:

div {
  writing-mode: vertical-lr; /* Sets the writing mode to vertical */
  min-block-size: 200px;
}

Setting a minimum height for an image element:

img {
  display: block; /* Ensures the image is a block-level element */
  min-block-size: 100px;
}

Values

ValueDescription
autoDefault value. The element's block size is determined by its content.
<length>Specifies the minimum block size in pixels or other absolute or relative units.
<percentage>Specifies the minimum block size as a percentage of the containing block's block size
min-contentThe intrinsic minimum block size of the element.
max-contentThe intrinsic maximum block size of the element.
`fit-content(<length><percentage>)`
fill-availableThe element should fill the available vertical space in its parent.
inheritInherits the min-block-size property from the parent element.
initialSets the min-block-size property to its default value.
unsetInherits the min-block-size property from the parent element, or sets it to its default value if there is no parent.

Best Practices

  • Use min-block-size with height and width to create a responsive design that ensures an element has a minimum size on different devices and screen sizes.
  • Avoid setting a fixed min-block-size for elements that need to grow dynamically to fit their content, such as text blocks. Use height and width instead, or consider setting a maximum size with max-block-size.
  • Use relative units like % and em instead of absolute units like px to ensure that the element scales appropriately across different devices.
  • When using min-block-size on images, ensure that the aspect ratio of the image is preserved by setting either the height or width of the image to auto.
  • Test your code in multiple browsers to ensure cross-browser compatibility.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes