10. Measurements

When building a web page we have different measurements available to specify a size. The most used are:

• Font size of the root element (rem).
• Percentage (%).
• Pixels (px).

Measurements are distinguished between relative and absolute.

Regarding relative ones, you should only care about rem or the percentage. And regarding absolute ones, you should only use, and in exceptional cases, pixels (when working with absolute and fixed positioning).

.texto {

    /* Relative measurement: Browser's font size. By default it is usually 16px */
    font-size: 1rem; /* 1 * 16 = 16px */
    font-size: 0.5rem; /* 0.5 * 16 = 8px */
    font-size: 2rem; /* 2 * 16 = 32px */
    font-size: 3.2rem; /* 3.2 * 16 = 51.2px or 51px since decimals don't exist on screens */

    /* Relative measurement: Parent element's font size. Not recommended. */

    /* The parent element is "font-size: 10px" */
    font-size: 1rem; /* 1 * 10 = 10px */
    font-size: 0.5rem; /* 0.5 * 10 = 5px */
    font-size: 2rem; /* 2 * 10 = 20px */
    font-size: 3.2rem; /* 3.2 * 10 = 32px */

    /* Absolute measurement: 1px = 1/96 of 1 inch or 0.26 millimeters */
    font-size: 12px;
}

width

It only works with block elements.

.elemento {
    width: 20rem;
}

Percentages: %, vw, vh

.elemento {
    /* Space available in the element */
    width: 100%;

    /* Browser width */
    width: 100vw;

    /* Browser height */
    height: 100vh;
}

min-width

Locks the element to a minimum width.

.elemento {
    min-width: 5rem;
}

max-width

Locks the element to a maximum width.

.elemento {
    max-width: 5rem;
}

height

Height of a block-type element.

.elemento {
    height: 12rem;
}

min-height

Locks the element to a minimum height.

.elemento {
    min-height: 12rem;
}

max-height

Locks the element to a maximum height.

.elemento {
    max-height: 12rem;
}

Dual Washer
Agitator and top loading

(An image)

Model: NTW4516FW
SKU: 5369600
494.99 euros