CSS properties - min-related

revision: December 15, 2024

Content

min-block-size property

- specifies the minimum size of an element in the block direction. If the content is smaller than the minimum size in block direction, the min-block-size property value will be applied. If the content is larger than the minimum size in block direction, the min-block-size property value has no effect.

Note: The related CSS property "writing-mode" defines block direction, and this affects the result of the min-block-size property. For pages in English, block direction is downward and inline direction is left to right.

The CSS min-block-size property is very similar to CSS properties "min-height" and "min-width", but the min-block-size property is dependent on block direction. .

CSS syntax : min-block-size: auto | value | initial | inherit;

Property values:

auto : default. The element's default min-block-size value.

length : specifies min-block-size in px, pt, cm, etc

% : specifies min-block-size in percent relative to size of parent element on the corresponding axis.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.minBlockSize="6vw"

                    <div id="DIV-A">
                        <p>min-block-size: 20vw;</p>
                        
                    </div>
                    <style>
                        #DIV-A {background-color: lightblue; border: solid black 0.1vw; width: 10vw; min-block-size: 20vw;}
                    </style>
                

min-height property

- defines the minimum height of an element. If the content is larger than the minimum height, the min-height property has no effect.If the content is smaller than the minimum height, the min-height property will be applied.

Note: This prevents the value of the height property from becoming smaller than min-height.

CSS syntax : min-height: none | length | initial | inherit;

Property values:

length : default value is 0. Defines the minimum height in px, cm, etc.

% : defines the minimum height in percent of the containing block.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.minHeight="6vw"

                    <div>
                        <h4>min-height: none (default):</h4>
                        <p id="p-A">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar,
                        at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. 
                        Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, 
                        nisl nec interdum minimus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
                        <h4>min-height: 20vw:</h4>
                        <p class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar,
                        at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. 
                        Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, 
                        nisl nec interdum minimus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
                    </div>
                    <style>
                        #p-A{background-color: yellow;}
                        p.ex1 {background-color: yellow; min-height: 10vw; }
                    </style>
                

min-inline-size property

- specifies the minimum size of an element in the inline direction. If the content is smaller than the minimum size in inline direction, the min-inline-size property value will be applied. If the content is larger than the minimum size in inline direction, the min-inline-size property value has no effect.

Note: The related CSS property "writing-mode" defines inline direction, and this affects the result of the min-inline-size property. For pages in English, block direction is downward and inline direction is left to right.

The CSS min-inline-size property is very similar to CSS properties "min-height" and "min-width", but the min-iline-size property is dependent on inline direction. .

CSS syntax : min-inline-size: auto | value | initial | inherit;

Property values:

auto : default. The element's default min-inline-size value.

length : specifies min-inline-size in px, pt, cm, etc

% : specifies min-inline-size in percent relative to size of parent element on the corresponding axis.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.minInlineSize="6vw"

                    <div id="DIV-B">
                        <p>min-inline-size: 20vw;</p>
                    </div>
                    <style>
                        #DIV-B p{background-color: lightblue; border: solid black 0.1vw; min-inline-size: 20vw; display:inline-block;}
                    </style>
                

min-width property

- defines the minimum width of an element.If the content is smaller than the minimum width, the minimum width will be applied. If the content is larger than the minimum width, the min-width property has no effect.

Note: This prevents the value of the width property from becoming smaller than min-width.

CSS syntax : min-width: length | initial | inherit;

Property values:

length : default value is 0. Defines the minimum width in px, cm, etc.

% : defines the minimum width in percent of the containing block.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.minWidth="6vw"

                    <div>
                        <h4>min-width: none (default):</h4>
                        <p id="p-B">Lorem ipsum dolor sit amet... </p>
                        <h4>min-width: 50vw:</h4>
                        <p class="ex2">Lorem ipsum dolor sit amet,.</p>
                    </div>
                    <style>
                        #p-B{background-color: yellow; display: inline-block;}
                        p.ex2 {background-color: yellow; min-width: 50vw; display: inline-block;}
                    </style>