Spacing & Sizing Tool

Padding (Innenabstand) 16px

Margin (Außenabstand) 16px

Root Schriftgröße (rem-Basis) 16px

em-Eltern Schriftgröße 20px

Box Schriftgröße 16px

Grid Baseline

Preset Abstand

Einheit

Vorschau Box

Unterschiede: px, em, rem

Box mit px

px: Absolute Einheit. Unabhängig von Kontext (font-size: 16px, width: 200px, height: 100px)

Box mit em

em: Relativ zur Schriftgröße des Elternelements (font-size: 1em, width: 10em, height: 5em)

Box mit rem

rem: Relativ zur Schriftgröße des Root-Elements (<html>, font-size: 1rem, width: 10rem, height: 5rem).