レイアウトに必須!marginとpaddingを使いこなす


おはようございます!
ママWebデザイナーの
自立&収入UPをサポートする
コンサルタントみなです^^

最近、メルマガ読者さんより
質問頂きましたので、
今回はそちらに回答したいと
思います^^

今日のテーマ
margin と padding
については、抑えておかないと

1pxだけズレる…
カンプ通りにレイアウトできない…
いつまでもfloatレイアウトに頼りきり…

ということになってしまいますので
基礎ではありますが
しっかり吸収してもらえればと
思います^^

まず、marginとpaddingの
基本的な概念は
以下の画像のようになります。

<margin>
ボーダーの外側に付ける余白の値。

<border>
境界線。
スタイル・太さ・色の指定ができる。

<padding>
ボーダーの内側に付ける余白。
コンテンツとボーダーの間にある
余白ですね。

で、特に駆け出しの方や
コーディングが苦手な方が
躓きやすいところは

・隣り合うmarginは相殺される
・line-heightによって
  marginやpaddingの値が異なる

というところかな~と思います。

隣り合うmarginは相殺される

コンテンツが上下に並んだ時
だけではなく、
floatレイアウトの時など

隣り合うコンテンツ
双方にmarginがついていると
marginは相殺されます。

カンタンに言うと、
marginの値が大きい方が
反映されるんですね。

画像では、20px同士ですので
相殺して【20px】の余白に
なっています。

上のコンテンツの
margin-bottomが20px、
下のコンテンツの
margin-topが20px、

合わせて 40px ではなく、
相殺して 20px になるんですね。

もしこれが、上のコンテンツが
margin-bottom: 20px、
下のコンテンツがmargin-top: 30px
だったとしたら

20px同士が相殺されるので
上下のコンテンツの間の余白は
30px になります。

line-heightによって
 marginやpaddingの値が異なる

読みやすくするため、
line-height を 1.5~1.7 にすることが
多くなりました。

レスポンシブにしてスマホでも
読みやすくするために、
line-heightは少し大きめの値を
設定することが増えたように
思います。

となると、単純に
コンテンツに対して
margin-bottom: 20px
と指定したとしても、
実際には、それ以上に大きな余白に
なっていることがあります。

その差がどこからきているのか?
というと、line-heightなんですね!

上記画像は少し小さくて
もしかしたら見えにくいかも
しれません(;´Д`)ヾ

よ~く見てみると、
コンテンツ下の余白がそれぞれ
異なっているのが分かると思います。

でも、指定しているのはどちらも
margin-bottom: 20px;
なんですよ^^

余白は、デザインにおいて
とても重要性が高いです。

特にWebサイトにおいては
1pxのズレは目立ちやすい…!

高額商品を扱ったり
ブランディングを意識するサイトに
余白のコントロールは必須…!

でも、コーディング段階になると
なかなかうまく組み立てられない…

そういう時は、是非
上記基礎概念を思い出して
振り返ってみてください^^

この基礎概念が体に染みつくと
floatレイアウトも
フレキシブルボックスレイアウトも
思い通りに扱るようになります!

今回はここまで☆
ママWebデザイナーみなでした^^


前の記事:

次の記事:

フリーランスのママWEBデザイナー必見!

月収20万円を安定させるメール講座7ステップ

  • 単価が2倍になった!
  • デザインや知識に自信がついた!
  • 企業所属経験ゼロでもできた!

実践で使えるヒアリングシートプレゼント中!

  • 知らないと怖い!デザインばかり
    勉強しているデザイナーの結末
  • 売れるWEBデザイナーに
    “最も必要なスキル”とは!?
  • 受注できるサイト制作法!
    5割は“コレ”で決まる!
  • WEBデザイナー専用!
    WEBからはじめてのお客様獲得術
  • SEO=集客力!?本当は…
  • 単価UP!
    ママWEBデザイナーの価格設定法
  • 制作した後に○○すると
    リピーター獲得できる!?