paddingとmarginの違いがわからない...。
CSS難しくて、Webデザイン挫折しそう...。
初心者にもわかるようにCSSを解説してほしい！
などなど、CSSでつまずき、困っている方もいらっしゃいますよね。
今回は、ITエンジニアの私が、paddingとmarginの違いを解説して、あなたの悩みを解消していきます！
- paddingとmarginの違い
- CSSコーディングでつまずいた時の対処方法
paddingとmarginの違い
paddingとmarginの違いは、余白部分が「内側」にあるか「外側」にあるかの違いになります。
以下のように覚えると分かりやすいです。
- paddingプロパティの場合、ブロックボックスの内側に余白ができる
- marginプロパティの場合、ブロックボックスの外側に余白ができる
ちなみに、ここでのブロックボックスは、HTMLの<div>や<p>で囲まれた「かたまり」のことを指しています。
同時に、ボックスモデルの概念を理解すると、「なるほど！」となるので、図を確認してくださいね。
このように、HTMLの要素は「四角い箱の中」で表現することができ、４つの要素で成り立っていることがわかります。
- 表示部分
- 内側の余白（padding）
- 境界線（border）
- 外側の余白（margin）
ちなみに、特にあなたが何も設定しない場合だと、margin、border、paddingの値はすべて「０」です。
「border」が境界線になることを知っているだけでも、「margin」と「padding」の違いがわかりやすくなりましたよね。
また、以下にHTMLとCSSのpaddingプロパティとmarginプロパティのコードを記載したので、それぞれをあなたの環境でも試してみてください。
<div>
説明用｜説明用｜説明用｜
説明用｜説明用｜説明用｜
説明用｜説明用｜説明用｜
説明用｜説明用｜説明用｜
説明用｜説明用｜説明用｜
説明用｜説明用｜説明用｜
説明用｜説明用｜説明用｜
</div>
div{
width:300px;
height:300px;
margin-top:100px;
margin-left:100px;
}
div{
width:300px;
height:300px;
padding-top:100px;
padding-left:100px;
}
どうでしょうか？
これで、あなたもpaddingプロパティとmarginプロパティを使い分けできるはずです！
ちなみに、私もCSSを使い始めた頃、しょっちゅう混乱していました。
ただ、私の場合は、混乱したらとりあえずmarginを入れて、画面を確認していましたね！
画面を確認して、おかしかったら修正すれば良いだけなので（笑）
あまり完璧を求めず、どんどんコードをかいてみてください！
そのうち、画面を確認しなくてもコードが書けるようになってくるので、安心して取り組んでくださいね。
Webデザインのコーディングでつまずいたらどうする？
Webデザインのコーディングでつまずいた時は、迷わずスクールに頼ることがおすすめです。
なぜなら、1人で悩んでいても解決しないからですね。
ちなみに、私が圧倒的におすすめしているWebデザインスクールは「シーライクス（SHElikes）」です。
シーライクスは、未経験者を対象としているので、HTMLやCSSの基本から学ぶことができますし、質問対応などのサポート体制もかなり充実しています。
ここですべてをご紹介するのは難しいので、良かったらこちらの記事も読んでみてください
まとめ
paddingとmarginの違いを解説したので、あなたも実際にコーディングしてみてください！
他にもCSSやHTMLの内容をまとめた記事があるので、お役に立てたら嬉しいです。
余談ですが、今回ご紹介した「シーライクス（SHElikes）」では、無料体験レッスンを行っています。
シーライクスが無料で体験できますし、カウンセリングの時間であなたが悩んでいることを質問することも可能です。
「CSSでのコーディングが上手くいかない」、「ポートフォリオの完成度がいまいち」という時には、誰かに相談してみることも大切ですよ。
無理な勧誘もないので、良かったら、この機会を活用してみてください！
私が無料体験レッスンに参加した記事はこちら
