初学者の方にとって、paddingとmarginの使い分けは、特に難しく感じるポイントです。言葉で説明されても、実際にコードを書いてみると、迷うケースもあると思います。
この記事では、具体的なサンプルを使って、ケーススタディとして、paddingとmarginの使い分けついて解説します。
CSSで余白を作る方法!marginとpaddingについて解説!marginとpaddingの基礎については、上の記事で解説しています。
💡 コーディングの練習なら模写修行!
この記事の目次
marginとpaddingの違い
冒頭で紹介した記事でも解説していますが、大事なことなので、再度違いと役割について記載しておきます。
プロパティ | 役割 |
---|---|
margin | 外側の余白 |
padding | 内側の余白 |
どちらも余白を作るプロパティです。違いは、上の表のようになります。
ボックスモデル
HTMLに書いた要素は上のようなボックスを作ります。これをボックスモデルと呼びます。
<p>親譲りの無鉄砲で小供の時から損ばかり…</p>
例えば、上のコードであればpタグの中身が、contentsになります。その外側にpadding → border → marginがあります。
- borderまでがその要素
- marginは要素の外側
上の点に注意です。このことから、paddingは内側の余白で、marginは外側の余白になることがわかります。
marginとpaddingの使い分けのポイント
- 背景やボーダーを入れたときにどうなるか
- 独立したパーツ間の余白かどうか
この2点に注目すると、どちらを使えば良いかスムーズに決めることができます。
これ以降、具体的なサンプルを使って、marginとpaddingの使い分けを紹介します。絶対の正解ではありませんが、参考にしてみてください。
paddingとmarginの使い分けをサンプルを使って解説!
FlexboxやCSS Gridなどは使わずに済む、簡単な例で解説します。
ケーススタディ1
💡 作るデザイン
💡 独立したパーツに分ける
この独立したパーツ間の余白はmarginで空けます。
💡 paddingとmarginの使い分け
- 薄い緑の部分がpadding
- 薄いオレンジの部分がmargin
タイトルの左側の線はborderで入れます。
💡 コード
<h2 class="title">marginとpaddingの使い分けのポイント</h2>
<p class="text">親譲りの無鉄砲で小供の時から…</p>
.title{
...
border-left: 10px solid rgb(197, 171, 95);
padding: 10px;
}
.text{
...
margin-top: 20px;
}
※ paddingとmarginの使い分けについて記事なので、細かい部分は省略しています。
ケーススタディ2
💡 作るデザイン
💡 独立したパーツに分ける
この独立したパーツ間の余白はmarginで空けます。
💡 paddingとmarginの使い分け
- 薄い緑の部分がpadding
- 薄いオレンジの部分がmargin
💡 コード
<section class="post">
<span class="post-category">HTML・CSS</span>
<div class="post-img">
<img src="..." alt="..." width="..." height="...">
</div>
<span class="post-date">2021-09-02</span>
<h2 class="post-title">paddingとmarginの使い分けをサンプルを使って解説!</h2>
</section>
.post-category{
...
display: inline-block;
padding: 8px;
}
.post-img{
...
margin-top: 10px;
}
.post-date{
...
display: inline-block;
margin-top: 10px;
}
.post-title{
...
margin-top: 10px;
}
span
タグはデフォルトでmargin
が効かないので、display: inline-block;
を入れています。
※ paddingとmarginの使い分けについて記事なので、細かい部分は省略しています。
ケーススタディ3
💡 作るデザイン
💡 独立したパーツに分ける
この独立したパーツ間の余白はmarginで空けます。
💡 paddingとmarginの使い分け
- 薄い緑の部分がpadding
- 薄いオレンジの部分がmargin
💡 コード
<section class="section section--about">
<span class="title-en">About</span>
<h2 class="title-ja">私たちについて</h2>
<p class="text">親譲りの無鉄砲で小供の時から…</p>
</section>
<section class="section section--service">
<span class="title-en">Service</span>
<h2 class="title-ja">サービス</h2>
<p class="text">親譲りの無鉄砲で小供の時から…</p>
</section>
.section{
padding: 80px 0;
}
.section--about{ background-color: #fff; }
.section--service{ background-color: #eee; }
.title-en{
...
}
.title-ja{
...
margin-top: 8px;
}
.text{
...
margin-top: 16px;
}
※ paddingとmarginの使い分けについて記事なので、細かい部分は省略しています。
超実務向け!コーディングの練習が出来るサービス作りました 🎉
模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。
こんな方におすすめ!
- 実務のレベル感を知りたい
- プロの制作フローを学びたい
- 何を考えながらコードを書くのか知りたい
- 基礎学習中、もしくは終えたばかり
- CSS設計やSCSSを使った書き方を学びたい
模写修行ではデザインデータ(FigmaとXD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。
他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。
コーディング教材の【模写修行】は他の教材と何が違うのか?嬉しい声もいただいています!
自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました!
TwitterでDMいただきました!🙇
classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです!解説記事もわかりやすい...!
Tweet
デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet
答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet