Height And Width in CSS
? Height and Width in CSS
The height and width properties control the size of an element’s box on the page. You can set them to fixed values, percentages, or use automatic sizing.
Basic Syntax
selector { width: value; height: value;}Common Value Types
| Value Type | Description | Example |
|---|---|---|
| Length units | Fixed size with units like px, em, rem, %, vh, vw | width: 200px; height: 50vh; |
| Percentage | Relative to the parent element’s size | width: 80%; |
| auto | Default — size based on content or other rules | height: auto; |
| max-content / min-content | Size based on content intrinsic size | width: max-content; |
| fit-content() | Size based on content but capped to a max | width: fit-content(300px); |
Examples
Fixed size
.box { width: 300px; height: 150px; background: lightblue;}Responsive width using percentage
.container { width: 80%; /* 80% of parent width */ height: 200px; background: lightgreen;}Viewport units
.fullscreen { width: 100vw; /* 100% of viewport width */ height: 100vh; /* 100% of viewport height */}Notes
heightpercentage values require the parent element to have a defined height.Minimize layout issues by combining width/height with
box-sizing: border-boxfor consistent sizing including padding and borders.If content inside overflows fixed height/width, you might need
overflowproperty to control scroll or clipping.
If you want, I can help you with how to make elements maintain aspect ratio or create responsive boxes using height and width!
