If you’ve already mastered the basics of CSS and confidently write stylesheets for beginner and intermediate-level websites, then you’ve probably heard of the properties: and . sets the width of an element, — the height. But what if you don’t know the exact dimensions of the block? Is all your work wasted?
Not at all ! CSS is prepared for all situations, even small ones like this, where the starring roles belong to the properties min-width, max-width, min-height, and max-height. Let’s go over the “magic” of these parameters one by one.
sets not just the width of a block, but its minimum width. What does that mean? It means the block can stretch as much as it wants, but not shrink below this value. For example, if you set min-width: 40px, it means the block’s width can be at least 40 pixels—no less.
sets the maximum width the block is allowed to grow to. This property is the opposite of min-width.
defines the minimum height of a block. Conceptually, it works the same way as min-width, but for height.
limits the block’s height to the given value. It functions just like max-width, only for height.
Now I want to explain why I decided to cover these properties in this article.
When I was a beginner in layout and frontend, I often saw these properties in other people’s code, but I couldn’t make sense of them. It was like “I knew the word, but not the meaning.” But the strangest part was that in many books, courses, and resources, these properties were never explained at all. So I had to learn them the hard way—through “practice, practice, and more practice.”
That’s exactly why I decided to write about them, so you won’t be confused when you see them used in the future.
Stay sharp, comrades!