What is CSS min max, actually?

When I have started building an entire website or any section of a web page, CSS min-width / max-width / min-height and max-height are very useful things for me as a frontend developer. But I have seen lot's of newbies gets confused quickly in CSS min-max properties.

So in this article, I'm going to clear your all doughts and confusions about CSS min max.

Prerequisites

• basic HTML | CSS knowledge
• calm mind

NOTE: To understand min-max you must have to understand the CSS width property.

what is the CSS width property?

CSS width property is used to give specific width or area of an element, which starts from 0px of the x-axis and at the "your defined"px area. which look like this

CSS width property is used to give specific width or area of an element, which starts from 0px of the x-axis and at the "your defined"px area. which look like this

In this picture, you can see that we have used a car image on the web page and the car width is starting from 0px and ends at 18px (it's just an example, not a real desktop size).

I hope now you are very much familiar with the CSS width property.

what are CSS min-width and max-width?

CSS min-width is used to set the minimum width of an element and max-width is used to set the maximum width area of an element. let's understand with a real-life example.

In this codepen example, you can see that we have created a div that has a ".box" class(red border) and in this box, we have used a car image that is responsive and 100 character paragraph. This box element's min-width is 300px and max-width is 600px now when we check this web page in different media screens then it will break or will show a scroll bar in less than 300px width screen and look proper in more than 600px. like this

The same rules are also working with min-height and max-height. If you are still not sure about it, So I recommend open this link https://codepen.io/atulcodex/pen/WNRMbpd and replace min-width and max-width with min-height/max-height. And share some snapshots of your result or output in the comment section.