Dimension Properties
| Property | Possible Values | Description |
|---|---|---|
width | auto, px, %, em, vw | Defines the width of an element |
height | auto, px, %, em, vh | Defines the height of an element |
max-width | none, px, %, vw | Sets the maximum width an element can have |
max-height | none, px, %, vh | Sets the maximum height an element can have |
min-width | 0, px, %, vw | Sets the minimum width an element must have |
min-height | 0, px, %, vh | Sets the minimum height an element must have |
box-sizing | content-box, border-box | Defines whether padding and border are included in width/height |
Explanation of Values
| Value Type | Description | Example |
px (pixels) | Fixed size, does not change with screen size | width: 300px; |
% (percentage) | Relative to the parent element | width: 50%; |
vw (viewport width) | Percentage of the browser's width | width: 80vw; |
vh (viewport height) | Percentage of the browser's height | height: 100vh; |
auto | Adjusts size based on content | width: auto; |
em / rem | Relative to font size | width: 10em; |
Example:
.container {
width: 80%;
max-width: 1200px;
min-width: 300px;
height: auto;
}