Sizing elements, min and max values.
✍️ 3 exercises + code challenge in this lessonUse width and height to size an element. Values can be px, %, em, rem, vw/vh or auto (the default).
max-width stops an element from growing too wide. It is key for responsive design.min-width, min-height and max-height work the same way.Mastering CSS Height & Width helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<style>
div { background: #2563EB; color: white; padding: 10px; margin-bottom: 10px; border-radius: 8px; }
.fixed { width: 200px; height: 60px; }
.percent { width: 50%; }
.max { max-width: 400px; }
.vh { height: 20vh; background: #14B8A6; }
</style>
<div class="fixed">200px × 60px</div>
<div class="percent">50% of the parent</div>
<div class="max">max-width: 400px (shrinks on small screens)</div>
<div class="vh">20% of the viewport height</div>Check what you learned in “CSS Height & Width”.
Stop the image from growing wider than its container.
img {
: 100%;
}
Which unit is 1% of the viewport width?
Make the box exactly 200px wide and 100px high.
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services