Explanation of em versus px (pixel) values

Bybasbuis CSS
Whitespace above and below a text block and the height (point size) of text are usually indicated in pixels or em.
The use of pixels is more common, but is also ‘old-fashioned’. Many web developers / designers now use em values. Here we provide an explanation of the differences between px and em.

Explanation of em versus px (pixel)

Pixels are absolute

Px, or pixels, refers to an absolute value. Absolute means that 10 pixels on a screen are always 10 pixels. The advantage of this is that it is always the same (depending on your screen resolution). However, that is also the major disadvantage; a white space of 20 pixels on a large screen looks nice, but on the screen of a smartphone or small tablet, a white space of 20 pixels is gigantic.

Em is relative

Nowadays, em is more often used as a value. Em is a relative value with respect to the height of the ‘parent’ block. Thus, em provides an amount of whitespace in relation to the element to which it belongs.

Example

You set a white space under a heading of 0.4em. Then the white space is 40% of the height of the headline. If the header is 24 pixels high, a white space of 0.4em gives a space of 9.6 pixels. A web builder usually sets a headline in such a way that the height of the headline for mobile display is somewhat smaller, for example 18 pixels. The white space then automatically becomes smaller; namely 7.2 pixels.

This CSS code controls the space above and below all H1, H2, H3, H4, H5 and H6 headings. Note: the first number is the space above the heading, the last number is the space below the heading. The margin in this code example is expressed in
em . You can change this to px, such as 15px. Note that decimals are marked here with a . (period) and not with a comma.

White space is very important

Below you see an image with a heading (bold) with whitespace underneath. Below that, you see a smaller heading with less whitespace.

White space is also part of ‘typography’. See this link for more details.

witruimte px en em

Similar Posts