cssのpxとemについて

csscss

広告

cssを使ってて、margin,positionなどのプロパティを使っていて値を指定する時に、開発ツールやIDEで補完が効いて、[px],[em],[%]が出てきました。これまでは、基本px,%を使っていたので、今回調べてみようと思います。違いや使い分けなどがわかればと思っています。
これまでのCSSについて調べてみたことに関しては、こちらを参照してください。
cssのプロパティのdisplayについて
cssのプロパティのfloatについて

「px」「em」「%」「rem」に特徴

  • px:要素やテキストサイズの絶対的に指定
  • em:フォントサイズを基準にサイズを変化させる
  • %:親要素に対してサイズを変化させる
    例えば親要素の幅が100pxの場合、雇用その幅を50%で指定すると、500pxと同じことになる.
  • rem:rootの要素を基準にサイズを変化させる
    例えば親要素の文字サイズが20pxの場合、雇用その文字サイズを0.5emで指定すると10pxとおなじになる。

広告