Web Analytics
☕ Coffee 𝕏 Follow
0%

Width & Height

Beginner ~8 min read

Fixed Dimensions

Use width and height to set exact dimensions in pixels, ems, or other units.

HTML
CSS
JS

Percentage Widths

Percentages are relative to the parent element's width. Great for responsive designs!

HTML
CSS
JS

Min and Max Width

min-width and max-width set boundaries for responsive elements. The element can grow or shrink within these limits.

HTML
CSS
JS

Min and Max Height

Similarly, min-height and max-height control vertical boundaries.

HTML
CSS
JS

Auto and 100%

width: auto (default) sizes based on content. width: 100% fills the parent container.

HTML
CSS
JS
Responsive Design: Use max-width: 100% on images to prevent them from overflowing their containers on small screens.

Summary

  • width / height - Set exact dimensions
  • Use % for responsive, fluid layouts
  • min-width / max-width - Set size boundaries
  • min-height / max-height - Control vertical limits
  • width: 100% - Fill parent container
  • width: auto - Size based on content (default)

Quick Quiz

Which property prevents an element from growing beyond 800px wide?

A
width: 800px;
B
min-width: 800px;
C
max-width: 800px;
D
width: 100%;
Previous Padding & Margin
Next Display Property