UI考察：余白の統一でUIの品質が変わる

サンプルをご覧ください。

See the Pen dLqHe by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

箱それぞれは大きさはバラバラですが、全体に統一感があるため整然さを感じられるはずです。
このサンプルで注意しているのは1点で、箱とページ全体からの余白の統一です。

HTML

<code id="html-code">&lt;div id="wrapper"&gt;
&lt;div class="col1"&gt;
  &lt;div class="row1"&gt;box1-1&lt;/div&gt;
  ～
&lt;/div&gt;
～
&lt;/div&gt;</code>

ループ構成なので主要HTMLのみ抜粋しています。
大枠の「#wrapper」と、行を構成する「col1～4」、箱となる「row1～3」のみで構成されているます。

CSS(Sass)

body {
  margin: 0;
}
#wrapper {
  padding: 0 5px;
}
[class*=row] {
  margin: 10px 5px;
}

重要な箇所のみ抜粋していますが、重要なのは余白設定のみです。

bodyによる余白はまずリセットしてしまい、「#wrapper」で左右のみに5px、「row1～3」は上下10px、左右5pxとしています。
余白を統一する際は、marginとpaddingの特性を正しく理解することが重要です。

今回も「余白を統一する」というビジョンの問題であって、ソースの細かい解説はあまり問題ではありません。
サイト全体の余白・間隔に統一感を持たせることも品質の向上、丁寧な仕事をしているという印象に繋がります。