CSS Units
CSS Units — A complete guide to CSS units: absolute, relative, viewport, container, and when to use each one. The guide walks through Absolute Units, Relative Units (em and rem), Viewport Units, Container and Percentage Units. Absolute units have a fixed size and do not change relative to anything else: px (pixels): 1px = 1/96th of 1 inch .element { width: 300px; padding: 16px; font-size: 14px; } pt (points): 1pt = 1/72 of 1 inch (used in print) @media print { body { font-size: 12pt; } } cm, mm, in (physical units): .element { width: 10cm;… em: Relative to the font-size of the parent element .parent { font-size: 20px; } .child { font-size: 0.8em; } /* 16px */ .margin { margin: 1em; } /* Equal to current font-size */ .padding { padding: 0.5em 1em; } /* Scales with font-size */ em compounding issue: .container { font-size: 16px; } /* 16px */ .container .section { font-size: 1.2em;…