Discover available options and use cases.
Introduction
The min-block-size
CSS property sets the minimum size of an element’s block dimension based on its writing mode. This feature is useful for responsive design.
Description
The min-block-size
property sets the minimum size of an element’s block dimension, depending on the writing mode. For vertical writing modes (like Japanese or Chinese), it affects the minimum width. For horizontal writing modes (like English), it affects the minimum height. This property is useful for creating responsive designs that adapt to different screen sizes and orientations.
Syntax
Values
- Length Values: Specific lengths like pixels (
px
) or ems (em
).- Example:
min-block-size: 100px;
- Example:
- Percentage Values: A percentage of the containing block’s size.
- Example:
min-block-size: 10%;
- Example:
- Keyword Values:
max-content
: Sets the size to the largest content size.min-content
: Sets the size to the smallest content size.fit-content
: Adjusts the size to fit the content within a specified range.- Example:
min-block-size: fit-content(20em);
- Global Values:
inherit
: Inherits the value from the parent element.initial
: Sets the value to its initial state.revert
: Reverts the property to the user agent’s default.unset
: Resets the property to its natural value.- Example:
min-block-size: initial;
Examples
Setting Minimum Block Size for Horizontal Text
HTML:
CSS:
Setting Minimum Block Size for Vertical Text
HTML:
CSS:
Using Percentage Values
HTML:
CSS:
Using Keyword Values
HTML:
CSS:
Using fit-content
HTML:
CSS:
Specifications
The min-block-size
property is defined in:
- [CSS Logical Properties and Values Level 1]WebsiteUrl
- [CSS Box Sizing Module Level 4]WebsiteUrl
Browser Compatibility
Browser | Version |
---|---|
Firefox | 41+ |
Google Chrome | 57+ |
Microsoft Edge | 79+ |
Opera | 44+ |
Safari | 12.1+ |
See Also
- [
min-width
]WebsiteUrl - [
min-height
]WebsiteUrl - [
writing-mode
]WebsiteUrl
Formal Definition
Property | Description |
---|---|
Initial Value | 0 |
Applies to | Same as [width ]WebsiteUrl and [height ]WebsiteUrl |
Inherited | No |
Percentages | Relative to the block-size of the containing block |
Computed Value | Same as [min-width ]WebsiteUrl and [min-height ]WebsiteUrl |
Animation Type | A [length]WebsiteUrl, [percentage]WebsiteUrl, or calc() |
Formal Syntax
Practical Use Cases
- Multilingual Websites:
- For websites supporting multiple languages, including vertical text, setting a minimum block size ensures consistent layout across languages.
- Responsive Design:
- In responsive web design, using the
min-block-size
property ensures text containers adapt well to different screen sizes without compromising readability.
- In responsive web design, using the
- Typography Enhancements:
- Designers can use the
min-block-size
property to create visually appealing typographic layouts, ensuring text containers have consistent size and spacing.
- Designers can use the
Example Code
By understanding and utilizing the min-block-size
property effectively, you can create more adaptable and visually appealing web designs that are compatible with a wide range of browsers and devices.
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.