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
Value | Description |
---|---|
auto | The element's block size is determined by its content. This is the default value. |
length | The element's block size is set to the specified length in pixels, percentages, or other units. |
min-content | The element's block size is set to the minimum size required to fit its content. |
max-content | The element's block size is set to the maximum size required to fit its content. |
fit-content | The 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. |
initial | Sets the property to its default value. |
inherit | Inherits 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
Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
---|---|---|---|---|---|
Yes | Yes | Yes | No | Yes | Yes |
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.