paddingとmarginの使い分けについて。

Question

＜実現したいレイアウト＞
ただのテキストにスペースを持って配置したいです。
以下のheader-logoをヘッダーの左に見やすい間隔をとって配置したいです。
＜疑問点＞
見た目はpaddingもmarginも変わらないが、どのように使い分けるのか、
またどのように使い分けているでしょうか。
＜コード＞

    <header>
      <div class="header-logo">Progate</div>
      <div class="header-list">
      </div>
    </header>

```CSS
.header {
  background-color: #26d0c9;
  color: #fff;
  height: 90px;
}

.header-logo {
  float: left;
  font-size: 36px;
/*以下の箇所です。*/
  padding: 20px 40px;

}

Comments

[m.ts10806]

「スペース」の持たせたい方向性によります。
他の要素との関連性もあります。
「使い分け」はそのまま検索すれば結構出てくると思いますが、
要件次第なところもあります。
実際のHTML、CSS、あと「実現したいレイアウト」提示してください。

[退会済みユーザー]

両方だな

[kai0310]

まずは、仕様を知りましょう。
margin |MDN
https://developer.mozilla.org/ja/docs/Web/CSS/margin
padding |MDN
https://developer.mozilla.org/ja/docs/Web/CSS/padding

Answer 1

以下の文章を読みたくない場合は、質問修正依頼欄でk011510さんが張ってくださっているリンクをご参照ください。

paddingとは

「padding」とは何でしょうか？
まず、Google検索をしてみるとMDNが出てきます。こちらはk011510さんが張ってくださったリンクと同じものです。
Google翻訳で英語から日本語にすると「パディング」「詰物」「詰め物」「綿」の主に４つの翻訳案が出てきます。「パディング」はまず論外です。意味を理解するのに何の意味もなしていません。「詰め物」というのは非常にわかりやすい表現だと思います。「歯の詰め物が..」よく聞く会話です。詰め物は、冠せ物の内外どちらにあるでしょうか？内側にあるはずです。それと、paddingの意味は同じになります。
歯の詰め物は、冠せ物の内側にある。
=> paddingは要素の内側にある。

marginとは

「padding」の意味については理解していただけたと思います。
さて、「margin」とは何でしょうか？
ここでもまたまた、Google検索にかけてみます。すると一番上にGoogel翻訳が出てきて、その次にMDNが出てきます。こちらもk011510さんが張ってくださったリンクと同じになります。
トップに出てた、Google翻訳を確認します。。すると、「マージン」「余白」「欄外」の主に３つの翻訳案が出てくると思います。こちらも「マージン」はまず論外です。少しは、Google翻訳は直でカタカナに訳すのはやめてほしいです。意味を理解するのに何の意味もなしていませんから。「余白」というのは、日常生活で広く浸透しており、非常にわかりやすい表現だと思います。しかしながら、「余白」と聞いて、何かの内外だと直感的に想像するに堪えないでしょう。「欄外」という翻訳は非常にわかりやすいと思います。日常生活で広く浸透していることに加えて、直感的に「欄」の「外」であることの理解をすることができます。これも、marginと同じ意味になります。
欄外は欄の外側にある。
=> marginは要素の外側にある。

paddingとmarginの違いとは

それぞれの最下行に書いてありますが、paddingは要素内側の空白。marginは要素外側の余白を表しています。これが、一番の違いであり、直感的に判断しやすい違いだと思います。

同じような疑問が出たら

もし、同じような疑問が出た場合は、Googleで一度詳細の意味について検索することをお勧めします。HTML, CSS, JavaScriptでしたらMDNが、PHPでしたらphp.netが詳細・わかりやすくまとめられています。たいていの質問は自分自身が最初に思い付いたわけではなく、だれか先人が同じような疑問を持ち解決していることが多数です。そのような情報を見つけ出せる検索能力も今後の時代には必要になってくると思います。

検索結果の順位などは変動する場合があります

Answer 2

• marginが外側の余白
  margin: 0 auto;などの使い方ができる。paddingはできない
• paddingが内側の余白

です。

その部分だけ切り取ると、どっちでもいいパターンも多いですが、
それ故に1つのサイトで「margin主体」なのか、「padding主体」なのかは決めておくと保守する際に楽だとは思います。

---

おそらく今後、.header-list内にナビゲーションのリンク<a>を設置すると思います。

<header>
  <div class="header-logo">Progate</div>
  <div class="header-list">
    <ul>
      <li><a href="">サービス</a></li>
      <li><a href="">制作実績</a></li>
      <li><a href="">会社概要</a></li>
      <li><a href="">お問い合わせ</a></li>
    </ul>
  </div>
</header>

このとき、デザインによりますが以下のようなことはいえると思います。

• <a>にpaddingを指定すると、タップ (クリック) できる領域が広くなるので押しやすい
• <li>と<li>の間の余白の指定をする際には、`margin`か`padding`かどちらでもOKだが、 <a>に`margin`を指定する選択肢はおそらくない。(内側にmarginがあると、探すのが大変なので)
• headerにdisplay: flex;を指定している場合、「.header-list」にmargin-left: auto;をすると右側配置になる。padding-leftでは不可。