» marginとpaddingどっち使えばいいの?|ホームページ制作・運営からWEBデザイン、ウェブサイト企画作成を行っている名古屋市のホームページ制作会社「ABABAI」

marginとpaddingどっち使えばいいの?

スタッフブログ

  • 2019.07.17

    marginとpaddingどっち使えばいいの?

    顔アイコン

    私もコーディングやり始めの頃、
    ここはpadding?margin?
    と、いった問題によく直面しておりました。

    どっちも余白入れれるのだから、どっちでもいいんじゃない?

    と、思う方もいるでしょう。

    ですが、そうやってしまうと、次に触る方が混乱してしまうカオスなコードになってしまいます(汗

    なので、ちゃんとした適切なコードを書いてあげましょう。

    ざっくり言うと、
    内側の要素が「padding」
    外側の要素が「margin」です。

    何言ってんだ? と、なると思われますので、簡易な図を作ってまいりました。

    blog-css

    paddingが緑の範囲、marginがオレンジの範囲です。

    上方向に余白を入れたければ、padding-topやmargin-topの数値を高めてあげると余白がつきます。

    ここで注意点!

    Q.じゃ、どっち使えばいいの?

    A.まず、余白をつけてどうしたいかを考えましょう

    padding

    例えば、文字に背景をつけるとします。

    この場合、外側の余白では距離をつけ、内側の余白では背景要素を増やせる形なります。

    blog-css3

    通常なら余白をつけるだけのpaddingになりますが、このように行う内容によって使い分ける必要があります。

    要素の大きさを変えるものを「padding」と覚えるとわかりやすいと思います。

    margin

    marginは主に、要素と要素の「距離」を取る為に使います。

    ただ、垂直方向に設定する距離には罠があります。

    上の要素と下の要素があったとします。

    こちらで距離を作る場合図のようになります。

    blog-css4

    しかし、両方から距離を作った場合、どうなるでしょう?

    50px+50px=100pxになると思われますが、実は50pxしか距離が取れないのです。

    これはmariginの相殺といい、お互いの領地を食い合ってしまうのです。

    この相殺ですが、値が大きい方が勝ってしまいますので、

    ただ例外があり、ブロック要素でなく、インライン要素の場合だったり、
    floatがかかっている要素などは相殺が起こりません。

    このように偏に「余白」といっても、様々な種類・条件があったりします。

    初心者が陥りやすい内容なので、是非、覚えたいですね。

    フェイスブックシェアボタン

名古屋で1番真面目なウェブ会社!! ABABAI お電話でのお問い合わせはこちら

メールでのお問い合わせ リンクボタン

資料請求 リンクボタン

カレンダー

2020年1月
« 12月    
 12345
6789101112
13141516171819
20212223242526
2728293031  

MENU

求人情報本社・広島オフィス

お問い合わせ

資料請求

ページの先頭へ

お問い合わせ

  • メールでのお問合せ リンクボタン
  • 資料請求 リンクボタン

閉じる

アババイめちゃ凄いこと

建築会社に選ばれる5.5の理由

制作実績

お客様の声

スタッフ紹介

代表挨拶

新着情報

会社概要&アクセス