CSS Width & Height

The width and height properties are used to set the dimensions of an element. This is essential for controlling the layout of your boxes, sidebars, and images.

Setting Width and Height

Width and height can be set to auto (default), or be specified in lengths like pixels (px), percentages (%), or viewport units (vw, vh).

div {
    width: 200px;
    height: 100px;
    background-color: lightgreen;
}

Using Percentages (%)

Percentage values are relative to the parent element's width. This is crucial for creating fluid, responsive designs.

.container {
    width: 80%; /* 80% of the screen or parent width */
    margin: auto;
}

Viewport Units (vw & vh)

Viewport units are relative to the size of the browser window.

• 1vw = 1% of the viewport width.
• 1vh = 1% of the viewport height (e.g., height: 100vh makes an element full screen).

Min-Width & Min-Height

These properties prevent an element from becoming smaller than a specified value, even if the content inside is very small.

p {
    min-height: 200px;
    background: #f1f1f1;
}