HTMLコーディング初学者で良くあるのが、カンプからHTMLにするところまではうまく行くものの余白の付け方がうまく行かない、ということかもしれません。
余白をどのように付ければ良いのでしょうか。
基本原則
余白を付けるときの基本原則は外側から内側、上から下というものです。
どういうことでしょうか。実際にありそうなフッターのカンプで考えてみましょう。
実例
前提条件
こんなフッターをよく見るのではないでしょうか。
- コンテンツサイズは最大サイズが今の状態で、画面を広げると左右の余白が広がり、縮まるとナビとSNSボタンの間の余白が詰まっていくようにする。
- 640pxより小さいときはSP版になるので、ナビとSNSボタンは縦並びにする
という条件が付いています。
HTMLの構造
- メディアクエリで640pxをブレイクポイントとして、横並び縦並びを変化させる
- ナビとSNSボタンはPC表示ではflexで横並び
というところまでは分かると思います。こんな感じで枠を作るのではないでしょうか。
（ナビとSNSボタンの中身は割愛）
一番外側の要素
ただ「余白をどう付けるのか」ということまではよく分からない、という初学者が多いように思います。
先ほどの基本原則に照らして「外側から内側に付ける」ということなので、上下左右の余白は一番外側の要素に付けたくなります。
上下の余白は一番外側の要素にpaddingで付ければ良いのですが、左右の余白は画面サイズによって変わります。
また、SP版では、左右の画面端にくっつかないように、左右にある程度の余白が必要です。
なので、一番外側の要素はこんな感じでpaddingが付きます。
container
そして、レイアウトが伸び縮みするので、一つ内側に良く言うcontainer要素を作ります。
（<div class="cotainer">という感じの要素になると思います）
ここにPC表示の場合flexを付け両端揃えにします。また横に伸びすぎないようにカンプ通りにmax-widthを付けます。
max-width以上の画面幅の場合は左右の余白を伸びるようにするので、margin-inline: auto（左右のmaringをauto）にします。
そうするとこうなります。
これで画面幅に応じたレイアウトになるはずです。
上から下の余白
こちらも原則なので必ずしも守らなければならないものではないのですが、上下に並んだ要素の場合上の要素に余白を付けるというものです。
上の例でもcontainerに余白を付け、コピーライトとの隙間を作っています。
すべての要素がそうなっていると、いちいちどの要素に余白が付いているか確認せずに修正することができます。
同様に左右に並んだ要素の場合は左から右に付けていくと統一されていて探しやすいですね。
marginとpadding
marginやpaddingはどう使い分けるのでしょうか？
- marginは兄弟要素間の余白
- paddingは親子関係の要素の親要素内の余白
基本的にはこのようになります。ただ、paddingはautoがないので、自動で伸び縮みする部分にはmarginを付けます。
また、画面端との余白にはmarginを用いても構いませんが、marginは相殺されることを考慮しなければなりません。
marginの相殺は親子になった要素の場合、重なったmarginは相殺（同じ方向のmarginだと大きい方が優先）されます。
いろいろ考慮すべきことがありますが「表示できれば良し」とせず、意識しなが余白を付けていけるといいですね。
