58バイトのCSS | WebworksTips

Webページの見栄えをよくするたった58バイトのCSS

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

max-width: 38rem;
多くのブラウザのデフォルのフォントサイズは16pxなので、38remは608pxになる。600pxのディスプレイをサポートすることは、合理的だと思われる。

padding: 2rem;
ディスプレイの幅が38remを下回る場合、このpaddingによって256pxあたりまで見栄えがよくなる。オプションに思えるかもしれないが、実際には一石二鳥の効果がある。paddingはショートハンドなので、左右だけでなく上下の余白も提供する。

margin: auto;
HTML Living Standardでは、mainはブロック要素であるため、Webページの中央に配置するために必要なのはautoだけである。