CSSのpx、em、rem単位の違い(pxからemへの変換)

px、em、remそれぞれの単位の違いについて説明します。

px(ピクセル)

最も一般的に使用される単位でピクセル単位で要素のサイズを指定します。
ピクセルは画面上の1つのドットを表します。これは要素のサイズが変化しないことを保証するために固定値として使用されます。

div {
  font-size: 16px; /* 16ピクセルのフォントサイズ */
  width: 300px; /* 300ピクセルの幅 */
}

borderやfont-sizeなど固定的な値が必要な場合

em(相対的な大きさ)

要素内のフォントサイズを相対的に指定するための単位です。
指定されたフォントサイズを基準としてその要素のフォントサイズを設定します。
例えば、 1emはその要素の親要素のフォントサイズに等しくなります、2倍のフォントサイズを指定したい場合は 2emを使用します。

div {
  font-size: 16px; /* 16ピクセルのフォントサイズ */
  width: 20em; /* 幅はフォントサイズの20倍（＝320px） */
}

font-sizeに合わせて行間line-height字間letter-spacingを可変させたい場合

rem(ルートの相対的な大きさ)

要素内のフォントサイズをルート要素(通常は要素)のフォントサイズに相対的に指定するための単位です。
ルート要素のフォントサイズを変更することでドキュメント内のすべての要素のサイズを一括して変更することができます。

html {
  font-size: 16px; /* ルート要素のフォントサイズを16pxに設定 */
}
div {
  font-size: 1.5rem; /* ルート要素のフォントサイズの1.5倍（＝24px） */
  width: 20rem; /* 幅はフォントサイズの20倍（＝480px） */
}

font-sizeコンテンツ領域の幅に合わせてmarginやpaddingを可変させたい場合

pxからemへの変換

CSS単位はあくまで目的に合わせて使い分けるものであり、どの単位を使うかはデザイナーや開発者の好みやプロジェクトの要件によって異なる場合があります。
個人的にはpxだけ使用するのが直感的で見やすいと思います。
レスポンシブデザインなど可変するレイアウトを実現するためには相対単位(em、rem)の使用が必要になる場合があるため、pxだけでなく相対単位についても知識を持っておくことが望ましいです。