CSS - Units

Pixels (px)

Pixels (px) are a fixed-size unit used in CSS. They do not change in size relative to other elements or the viewport. One pixel represents a single dot on the screen.

When using pixels, you specify an exact size for an element. For example, setting the width of a div to 200px will make it exactly 200 pixels wide, regardless of the screen size or resolution.

.container {
  width: 300px;
  height: 200px;
  font-size: 16px;
}

Advantages of using pixels:

• Precise control over element sizes
• Consistent appearance across different devices with the same pixel density
• Easy to understand and use for beginners

Disadvantages of using pixels:

• Lack of flexibility and responsiveness
• May appear too small or too large on devices with different pixel densities
• Not scalable for users who need to zoom in or out

Despite these disadvantages, pixels are still widely used for certain elements that require exact sizes, such as images, icons, and borders. However, for typography and layout, it's generally recommended to use relative units to achieve better responsiveness and accessibility.

Percentages (%)

Percentages are units in CSS that let you set sizes and positions of elements relative to their parent container. The size of an element set in percentages will be a fraction of its parent element's size.

To calculate the actual size of an element using percentages, multiply the percentage value by the parent element's corresponding dimension. For example, if a parent element has a width of 500px and its child has a width set to 50%, the child's actual width will be 250px (50% of 500px).

.parent {
  width: 500px;
}

.child {
  width: 50%;
  padding: 10%;
}

The child will have a width of 250px (50% of its parent's width) and padding of 50px (10% of its parent's width).

Em (em)

The em unit is based on an element's font size. One em is equal to the font size of the element. If an element has a font size of 16px, then one em is equal to 16px for that element.

When using em for properties other than font size, the value is calculated relative to the font size. This means that if you change the font size, sizes specified in em will also change proportionally.

.container {
    font-size: 16px;
}

.heading {
    font-size: 2em; /* 32px (2 * 16px) */
    margin-bottom: 1.5em; /* 24px (1.5 * 16px) */
}

The heading will have a font size of 32px (2 times its parent's font size) and a bottom margin of 24px (1.5 times its own font size).

Rem (rem)

The rem (root em) unit is similar to em, but is always relative to the root element's (html) font size, rather than the font size of the element itself. This makes rem values consistent throughout the document, regardless of the nesting level or local font size changes.

By default, most browsers have a root font size of 16px. So if you set an element's size to 1.5rem, it will be calculated as 1.5*16=24 pixels.

html {
   font-size: 16px;
}

.container {
   font-size: 1.2rem; /* 19.2px (1.2 * 16px) */
   padding: 2rem; /* 32px (2 * 16px) */
}

The container element will have a font size of 19.2px and padding of 32px, regardless of its parent's font size.

Using rem for sizing and spacing elements helps maintain consistency and makes it easier to scale the entire design by changing only the root font size.

Viewport Units (vw, vh, vmin, vmax)

Viewport units are based on the size of the viewport (the visible area of a webpage). There are four viewport units in CSS:

• vw (viewport width): one vw is one percent of the viewport's width.
• vh (viewport height): one vh is one percent of the viewport's height.
• vmin (viewport minimum): one vmin is the smaller dimension between vw or vh.
• vmax (viewport maximum): one vmax is the larger dimension between vw or vh.

These units are useful for creating responsive designs as they allow elements to adapt to different screen sizes automatically.

.hero {
   width: 100vw;
   height: 50vh;
   font-size: 5vmin;
}

The hero element will have a width that is equal to 100% of the viewport width, a height that is equal to 50% of the viewport height, and a font size that is equal to five percent of the smaller dimension between height or width.

Using viewport units, you can create elements that scale proportionally with the size of the viewport, making your design more responsive and adaptable to different devices and screen sizes.

Ex (ex)

The ex unit is a relative unit in CSS based on the x-height of the current font. The x-height is the height of lowercase letters (like "x") in a font, excluding ascenders and descenders. One ex equals the x-height of the font.

The ex unit is not as common as units like em or rem, but it can be useful when you want to size elements relative to the x-height of a font.

To calculate the value of ex, multiply the desired size by the x-height of the font. If the x-height of a font is 8px and you want an element to be 3 times this height, set its size to 3ex (which would be 24px).

.container {
  font-size: 16px;
}

.example {
  width: 10ex;
  height: 2ex;
  border: 1px solid black;
}

The width of .example will be ten times the x-height of the font, and its height will be two times that height.

Ch (ch)

The ch unit is another relative unit in CSS that represents the width of the "0" (zero) character in current fonts. It helps when you want to size elements based on characters.

One ch equals the width of the "0" character in fonts. This makes it good for setting widths for input fields or text containers to fit a certain number of characters.

To calculate the value of ch, multiply the desired number of characters by the width of the "0" character in fonts. If the "0" character is about eight pixels wide and you want an input field to fit twenty characters, set its width to twenty ch, which would equal one hundred sixty pixels.

.container {
    font-size: 16px;
}

.input-field {
    width: 20ch;
    padding: 0.5em;
    border: 1px solid #ccc;
}

The .input-field has a width fitting approximately twenty characters, assuming the "0" character is about eight pixels wide in the chosen font.