Web開発では、px、rem、emがCSSでよく使われる長さの単位です。どれもサイズを指定しますが、基準が違うため、結果も変わります。
pxとは
pxはピクセルを基準にした固定単位です。直感的で使いやすく、ボーダーやアイコンサイズ、小さなUI要素など、明確なサイズ指定に向いています。
emとは
emは親要素のフォントサイズを基準にした相対単位です。親のサイズで変わるため、ネストしたレイアウトでは思ったより大きく・小さく見えることがあります。
remとは
remはルート（html）のフォントサイズを基準にした相対単位です。基準がサイト全体で一定なので、レスポンシブやアクセシビリティでよく使われます。
いつどれを使うか
固定サイズが必要なときはpx。 一貫性が大事なとき（全体のフォントサイズ、余白、レイアウトの隙間）はrem。 親に合わせてスケールしたいとき（ボタン内のテキスト、コンポーネント内）はem。
よくある使い方
最近は、テキストや余白にrem、ボーダーなどごく小さいものにpx、という組み合わせが多いです。
ややこしく感じる理由
一見どれも似ていますが、基準が違うため結果は大きく変わります。emは特に、親のネストでサイズが積み重なります。
まとめ
px、rem、emにはそれぞれ向き不向きがあります。固定か、親基準か、サイト全体基準かを用途で決めましょう。EveryUtilの単位変換ツールでpxとremの値を比較するのに便利です。