Minimun Height

In this aticle we are going to learn about minimum height property, how we can set the minimum height of html element with a minimum height property in css to prevent the value of the height property from becoming smaller than minimum height.

We learnt about css in general, fonts, colors, background colors, borders, margin padding, float, width, minimum width and height in css so, we will be focusing on minimun height.

Minimum height

Minimum height is a css property used to set a height limit that the element can have. The element with minimum height can not have height smaller than minimum height but can have the height larger than minimum height.

We are going to give the div element minimum height of 190px, copy and paste below code.

<div style="background-color: yellow; min-height: 190px;">This is 190px minimum height of div element.</div>


So, we should have the following results.

This is 190px minimum height of div element.

We are going to increase the minimum height and we will set it to 200px, copy and paste below code.

<div style="background-color: purple; min-height: 200px;">This is 200px minimum height of div element.</div>


So, we should have the following results.

This is 200px minimum height of div element.

We are going to decrease the minimum height and we will set it to 100px, copy and paste below code.

<div style="background-color: orange; min-height: 100px;">This is 100px minimum height of div element.</div>


So, we should have the following results.

This is 100px minimum height of div element.

Let us create two elements with different minimum heights of 55px and 70px, copy and paste below code.

<div style="background-color: blue; min-height: 55px;">This is 55px minimum height of div element.</div>

<div style="background-color: green; min-height: 70px;">This is 70px; minimum height of div element.</div>


So, we should have the following results.

This is 55px minimum height of div element.
This is 70px minimum height of div element.

Conclusion

In this article we learnt about minimum height property with examples, how we can set the minimum height of html element with a minimum height property in css to prevent the value of the height property from becoming smaller than minimum height.