模写の際、CSSについて

現在、Progateにて初級編を学習後、試しに模写を行なっています。
しかし、paddngとmarginを見分けることが困難です。
※それぞれの違いは理解しているつもりです。

しかし、模写の際にどちらを使えばいいか分かりません。
この場合はどちらで書けば良いのでしょうか。

行動規範の内容に同意します

回答2件

模写の際？
わかりませんがpaddingは要素の内側。
marginは要素の外側に空白を作るという違いです。

投稿2020/04/30 13:18

rikutennis

総合スコア55

ベストアンサー

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

です。

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

例えば、以下のように.nav内にナビゲーションのリンク<a>に注目した場合を想定します。

HTML
1<header>
2  <div class="logo">タイトル</div>
3  <div class="nav">
4    <ul>
5      <li><a href="">サービス</a></li>
6      <li><a href="">制作実績</a></li>
7      <li><a href="">会社概要</a></li>
8      <li><a href="">お問い合わせ</a></li>
9    </ul>
10  </div>
11</header>

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

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

投稿2020/04/30 13:14