Recommendations of unit types per media type:
| Media | Recommended | Occasional use | Infrequent use | Not recommended |
|---|---|---|---|---|
| Screen | em, rem, % | px | ch, ex, vw, vh, vmin, vmax | cm, mm, in, pt, pc |
| em, rem, % | cm, mm, in, pt, pc | ch, ex | px, vw, vh, vmin, vmax |
Relative units play nicely with screen and print media types and should be the most frequently used CSS units.
| Unit | Description |
|---|---|
| % | percentage, relative to the same property of the parent element |
| em | relative to font size of the element |
| rem | relative to font size of the root element |
| ch | relative to width of the "0" (ZERO, U+0030) glyph in the element's font |
| ex | relative to x-height of the font |
Physical units (e.g. cm, mm, in, pc, and pt) should only be used for print style sheets, while pixels (px) should only be used for the screen. While there are consistent conversions among these absolute length units, depending on the device, CSS units can mean different things. For example, while 1cm in CSS should print as one physical centimeter, there's no guarantee that 1cm in CSS results in one physical centimeter on the screen.
| Unit | Description | cm | mm | in | pc | pt | px |
|---|---|---|---|---|---|---|---|
| cm | centimeter | 1cm |
10mm |
||||
| mm | millimeter | 1/10cm |
1mm |
||||
| in | inch | 2.54cm |
25.4mm |
1in |
6pc |
72pt |
96px |
| pc | pica | 1/6in |
1pc |
12pt |
16px |
||
| pt | point | 1/72in |
1/12pc |
1pt |
4/3px |
||
| px | pixel | 1/96in |
1/16pc |
3/4pt |
1px |
Viewport-percentage length units should be used with caution, as there are still some lingering bugs with their implementation.
| Unit | Description |
|---|---|
| vw | relative to 1% of viewport's width |
| vh | relative to 1% of viewport's height |
| vmin | relative to 1% of viewport's smaller dimension |
| vmax | relative to 1% of viewport's larger dimension |
Assume the root font size is 16px but don't require it to be so. Either declare the font size as 100% or don't declare the font-size property at all.
html {
font-size: 100%;
}
Most likely use px, as most of the time, the border shouldn't need to scale.
.Component {
border-bottom: 1px solid #ccc;
}