Height/width Properties

In CSS, we can use the height and width properties to specify the height and width of an element, respectively.

These properties allow you to control the size of elements on a web page.

Fixed Height and Width:

We can specify the fixed height and width values using pixels (px), ems (em), rems (rem), percentages (%), or other length units.

Example:

div {
    height: 200px; /* Fixed height of 200 pixels */
    width: 300px; /* Fixed width of 300 pixels */
}

Percentage Height and Width:

Example:

div {
    height: 50%; /* Height takes up 50% of its containing block */
    width: 75%; /* Width takes up 75% of its containing block */
}

We can specify the height and width of an element as a percentage of its containing block.

Example:

div {
    height: auto; /* Height adjusts to fit content */
    width: auto; /* Width adjusts to fit content */
}

Auto Height and Width:

Example:

div {
    max-height: 300px; /* Maximum height of 300 pixels */
    max-width: 400px; /* Maximum width of 400 pixels */
}

We can let the browser automatically calculate the "height" and "width" of an element based on its content using the value auto.

Example:

div {
    min-height: 100px; /* Minimum height of 100 pixels */
    min-width: 200px; /* Minimum width of 200 pixels */
}

Max Height and Width:

We can set maximum height and width limits for an element. The element's size will not exceed these limits.

Min Height and Width:

We can set minimum height and width requirements for an element. The element's size will not be smaller than these limits.

These properties let us control the size of elements in our layout, allowing us to create responsive designs and ensure consistent spacing and layout across different devices and screen sizes.

<-- CSS Background Properties

Font Size and Font Family -->