CSS min-block-size

The min-block-size property in CSS is used to set the minimum block size of a block-level element. The block size refers to the height of the element if it’s a block container, or the width of the element if it’s an inline container. This property can be used to ensure that an element is at least a certain size, even if its content is smaller.

Here's how you can use the min-block-size property in your CSS:

Result:


    .box {
      min-block-size: 100px;
      border: 1px solid black;
    }

This is a box with a minimum block size of 100px.

In the example above, we have a div with a class of "box" that has a min-block-size of 100px. Even if the content inside the box is smaller than 100px, the box will still have a minimum height of 100px. The border is added to visually show the size of the box.

It's important to note that the min-block-size property only sets the minimum size of the block container, and does not affect the size of the content inside the block. If the content is larger than the minimum block size, the block will expand to accommodate the content.