Which unit should be used in web design to define space (margin, padding, etc.)?

In the CSS of a website is it better, for human readability, define margin and padding units in px, em or pt?

Answer

Is white space difficult to read when specified as pixels?

An EM is a variable unit and is useful when you want to scale something based upon the (variable) size of something else. It is common when specifying type to set the line height relative to the type size and this is what EMs are for. 10pt with 1em line height is classic 10/10 or “solid” type, and 1.2em (or 120%) and 2em are probably the 2 most common line heights.

For CSS, ems are useful when you want to set type in a container and want the container to scale up or down if one later changes the type size. This means that one only needs to set the type size in one location and everything else cascades from there (it is an ease of editing feature). It is up to the designer to decide if scaling up the box is a good idea (or if it will break the design, should the box get too large). edit: there is also the problem of client-side letter scaling, so ems have a use with respect to accessibility.

Regarding pt and px, since pt is an inches measurement and inches do not really exist in the computer monitor context, I tend to use px.

In summation: ems are a useful variable unit for ease of design, and have no bearing on readability.

Attribution
Source : Link , Question Author : Drake , Answer Author : horatio

Leave a Comment