Tillitsdone
down Scroll to discover
CSS min-block-size Enhancing Responsive Design
Explore the CSS min-block-size property, essential for setting the minimum horizontal or vertical size of elements based on writing mode.

Discover available options and use cases.
thumbnail

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

/* <length> values */
min-block-size: 100px;
min-block-size: 5em;
/* <percentage> values */
min-block-size: 10%;
/* Keyword values */
min-block-size: max-content;
min-block-size: min-content;
min-block-size: fit-content;
min-block-size: fit-content(20em);
/* Global values */
min-block-size: inherit;
min-block-size: initial;
min-block-size: revert;
min-block-size: unset;

Values

  • Length Values: Specific lengths like pixels (px) or ems (em).
    • Example: min-block-size: 100px;
  • Percentage Values: A percentage of the containing block’s size.
    • Example: min-block-size: 10%;
  • 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:

<div class="exampleText">Example text</div>

CSS:

.exampleText {
background-color: lightblue;
min-block-size: 150px;
}

Setting Minimum Block Size for Vertical Text

HTML:

<p class="exampleTextVertical">Example text</p>

CSS:

.exampleTextVertical {
writing-mode: vertical-rl;
background-color: lightgreen;
min-block-size: 200px;
}

Using Percentage Values

HTML:

<div class="examplePercentage">Example text</div>

CSS:

.examplePercentage {
background-color: lightcoral;
min-block-size: 50%;
}

Using Keyword Values

HTML:

<div class="exampleMaxContent">Example text</div>

CSS:

.exampleMaxContent {
background-color: lightyellow;
min-block-size: max-content;
}

Using fit-content

HTML:

<div class="exampleFitContent">Example text</div>

CSS:

.exampleFitContent {
background-color: lightpink;
min-block-size: fit-content(20em);
}

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

BrowserVersion
Firefox41+
Google Chrome57+
Microsoft Edge79+
Opera44+
Safari12.1+

See Also

  • [min-width]WebsiteUrl
  • [min-height]WebsiteUrl
  • [writing-mode]WebsiteUrl

Formal Definition

PropertyDescription
Initial Value0
Applies toSame as [width]WebsiteUrl and [height]WebsiteUrl
InheritedNo
PercentagesRelative to the block-size of the containing block
Computed ValueSame as [min-width]WebsiteUrl and [min-height]WebsiteUrl
Animation TypeA [length]WebsiteUrl, [percentage]WebsiteUrl, or calc()

Formal Syntax

min-block-size =
<'min-width'>
<min-width> =
auto |
<length-percentage [0,]> |
min-content |
max-content |
fit-content( <length-percentage [0,]> ) |
<calc-size()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )
<anchor-size()> =
anchor-size( [ <anchor-element> || <anchor-size> ]?, <length-percentage>? )
<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<anchor-element> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN

Practical Use Cases

  1. Multilingual Websites:
    • For websites supporting multiple languages, including vertical text, setting a minimum block size ensures consistent layout across languages.
  2. Responsive Design:
    • In responsive web design, using the min-block-size property ensures text containers adapt well to different screen sizes without compromising readability.
  3. Typography Enhancements:
    • Designers can use the min-block-size property to create visually appealing typographic layouts, ensuring text containers have consistent size and spacing.

Example Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min-Block-Size Example</title>
<style>
.exampleText {
writing-mode: vertical-rl;
background-color: yellow;
min-block-size: 200px;
}
</style>
</head>
<body>
<p class="exampleText">Example text</p>
</body>
</html>

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.

Get in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.