- CSS - Home
- CSS - Roadmap
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Types
- CSS - Measurement Units
- CSS - Selectors
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS - Cascading
- CSS - Universal Selectors
- CSS - ID Selectors
- CSS - Group Selectors
- CSS - Class Selectors
- CSS - Child Selectors
- CSS - Element Selectors
- CSS - Descendant Selectors
- CSS - General Sibling Selectors
- CSS - Adjacent Sibling Selectors
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Advanced Features
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS Interview Questions
- CSS Online Quiz
- CSS Online Test
- CSS Mock Test
- CSS - Quick Guide
- CSS - Cheatsheet
- CSS - Properties References
- CSS - Functions References
- CSS - Color References
- CSS - Web Browser References
- CSS - Web Safe Fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - min-block-size Property
CSS min-block-size property sets the minimum block size of an element. The direction of the block is determined by the writing-mode property. The property has no effect, if the content fits well within the block.
Syntax
min-block-size: auto | length | percentage | initial | inherit;
Property Values
| Value | Description |
|---|---|
| auto | No height limit is set with this value. Default. |
| length | It sets the min-block-size of the element using length units (e.g. px, em, rem etc.) |
| percentage | It sets the min-block-size of the element using percentage value relative to the size of the containing element. |
| initial | It sets the property to its default value. |
| inherit | It inherits the property from the parent element. |
Examples of CSS Min Block Size Property
The following examples explain the min-block-size property with different values.
Min Block Size Property with Auto Value
To not set any specific limit on the block-size of an element, we use the auto value. The size of the block depends on the length of the content. This is shown in the following example.
Example
<!DOCTYPE html> <html> <head> <style> .container { background-color: lightgreen; min-block-size: auto; } </style> </head> <body> <h2> CSS min-block-size property </h2> <h4> min-block-size: auto </h4> <div class="container"> <p> TutorialsPoint offers comprehensive online tutorials across various subjects, including programming, web development, and data science. It provides accessible, step-by-step guides, practical examples, and interactive learning resources for learners of all levels. </p> </div> </body> </html> Min Block Size Property with Length Values
To set the minimum size of the block of an element, we can specify the size using length units (e.g. px, em, rem etc.). The specified size will be applied to the block. If the content is greater than the size of the block, the element will grow to accomodate the content. This is shown in the following example.
Example
<!DOCTYPE html> <html> <head> <style> .container { background-color: lightgreen; } .size1 { min-block-size: 90px; } .size2 { min-block-size: 4.5em; } </style> </head> <body> <h2> CSS min-block-size property </h2> <h4> min-block-size: 90px </h4> <div class="container size1"> <p> TutorialsPoint offers comprehensive online tutorials across various subjects, including programming, web development, and data science. It provides accessible, step-by-step guides, practical examples, and interactive learning resources for learners of all levels. </p> </div> <br/> <h4> min-block-size: 4.5em </h4> <div class="container size2"> <p> TutorialsPoint offers comprehensive online tutorials across various subjects, including programming, web development, and data science. It provides accessible, step-by-step guides, practical examples, and interactive learning resources for learners of all levels. </p> </div> </body> </html> Min Block Size Property with Percentage Values
To set the minimum size of the block of an element, we can specify the size using percentage value (e.g. 10%) relative to the size of the containing element. The specified size will be applied to the block. If the content is greater than the size of the block, the element will grow to accomodate the content. This is shown in the following example.
Example
<!DOCTYPE html> <html> <head> <style> .outer-container { height: 100px; } .container { background-color: lightgreen; } .size1 { min-block-size: 58%; } .size2 { min-block-size: 75%; } </style> </head> <body> <h2> CSS min-block-size property </h2> <h4> min-block-size: 58% (of the size of the containing element) </h4> <div class="outer-container"> <div class="container size1"> <p> TutorialsPoint offers comprehensive online tutorials across various subjects, including programming, web development, and data science. It provides accessible, step-by-step guides, practical examples, and interactive learning resources for learners of all levels. </p> </div> </div> <br/> <h4> min-block-size: 75% (of the size of the containing element) </h4> <div class="outer-container"> <div class="container size2"> <p> TutorialsPoint offers comprehensive online tutorials across various subjects, including programming, web development, and data science. It provides accessible, step-by-step guides, practical examples, and interactive learning resources for learners of all levels. </p> </div> </div> </body> </html> Min Block Size Property with Writing Mode
The min-block-size property can be used in combination with the writing-mode property which determines the block direction. In horizontal-mode, the block-size grows from top to bottom. In vertical-mode, the block-size grows from left to right. This is shown in the following example.
Example
<!DOCTYPE html> <html> <head> <style> .outer-container { height: 150px; } .container { background-color: lightgreen; min-block-size: 40%; } .horizontal { writing-mode: horizontal-lr; } .vertical { writing-mode: vertical-rl; } </style> </head> <body> <h2> CSS min-block-size property </h2> <h4> min-block-size: 40% (of the size of the containing element); writing-mode: horizontal-lr; </h4> <div class="outer-container"> <div class="container horizontal"> <p> TutorialsPoint offers comprehensive online tutorials across various subjects, including programming, web development, and data science. It provides accessible, step-by-step guides, practical examples, and interactive learning resources for learners of all levels. </p> </div> </div> <br/> <h4> min-block-size: 40% (of the size of the containing element); writing-mode: vertical-rl; </h4> <div class="outer-container"> <div class="container vertical"> <p> TutorialsPoint offers comprehensive online tutorials across various subjects, including programming, web development, and data science. It provides accessible, step-by-step guides, practical examples, and interactive learning resources for learners of all levels. </p> </div> </div> </body> </html> Supported Browsers
| Property |  |  |  |  |  |
|---|---|---|---|---|---|
| min-block-size | 57.0 | 79.0 | 41.0 | 12.1 | 44.0 |
css_reference.htm
Advertisements
