The CSS min-block-size property sets the minimum size of an element in the block direction, preventing it from shrinking below a specified limit.
- Prevents an element from becoming smaller than the specified minimum block size.
- Adapts to different writing modes by controlling the block dimension.
- Helps maintain consistent layouts and improves content readability.
Syntax:
min-block-size: length | percentage | auto | min-content | max-content | fit-content | inherit | initial | unset;Property values
- length: It sets a fixed value defined in px, cm, pt etc. Negative values are also allowed. Its default value is 0px.
- percentage (%): It is the same as length but the size is set in term of percentage of the window size.
- auto: It is used when it is desired that the browser determines the block-size.
- none: It is used when you don't want to limit on the size of the box.
- max-content: It is used when you preferred min-width on the size of the box.
- min-content: It is used when you preferred min-width on the size of the box.
- fit-content: It is used when you preferred exact-width on the size of the box.
- initial: It is used to set the value of the min-block-size property to its default value.
- inherit: It is used when it is desired that the element inherits the min-block-size property from its parent element.
- unset: It is used to unset the default mix-block-size.
Examples of min-block-size Property
Below examples illustrate the min-block-size property in CSS:
Example 1: The min-block-size property ensures that the cyan box maintains a minimum block size of 40px, preventing it from shrinking below that size even if the content requires less space.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS min-block-size Property</title>
<!--Driver Code Ends-->
<style>
body {
background-color: #dcdcdc;
font-family: "Times New Roman", serif;
}
h1 {
color: green;
margin-bottom: 15px;
}
h2 {
font-size: 22px;
margin-bottom: 25px;
}
.box {
background-color: cyan;
width: 200px;
min-block-size: 40px;
text-align: center;
margin-left: 35px;
font-size: 18px;
padding: 5px 0;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS | min-block-size Property</h2>
<div class="box">
A Computer Science<br>
Portal for Geeks
</div>
</body>
</html>
<!--Driver Code Ends-->
Example 2: The min-block-size property sets a minimum block size of 80px for the vertically oriented cyan box, preventing it from shrinking below that size regardless of the content length.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS | min-block-size Property</title>
<!--Driver Code Ends-->
<style>
body {
background-color: #dcdcdc;
font-family: "Times New Roman", serif;
}
h1 {
color: green;
font-size: 34px;
margin: 10px 0;
}
h2 {
font-size: 20px;
margin-bottom: 25px;
}
.wrapper {
position: relative;
margin-left: 30px;
}
.bar {
width: 200px;
height: 20px;
background: green;
}
.box {
background: cyan;
writing-mode: vertical-rl;
min-block-size: 80px;
inline-size: 95px;
text-align: center;
font-size: 18px;
position: absolute;
top: 0;
left: 15px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS | min-block-size Property</h2>
<div class="wrapper">
<div class="bar"></div>
<div class="box">
A Computer Science Portal for Geeks
</div>
</div>
</body>
</html>
<!--Driver Code Ends-->