htmlのpaddingとmarginの見分け方について

Question

コード
```### 前提・実現したいこと

### 発生している問題・エラーメッセージ

HTMLから始めた初心者です。
現在Progateで学習しているのですが、paddingとmarginの使い分けが分かりません。
答えと照らし合わせてみるとpaddingとmarginで違うのに、レイアウトでは同じに見えています。
判断基準を教えて頂きたいです????‍♀️

Comments

[Lhankor_Mhy]

同じに見えるなら問題ないでしょう。

という回答で構いませんか？　それとも、Progateがどういう基準で正解判定をしているのかを知りたいのですか？

[gentaro]

「paddingとmargin」でググれば最初に出てくる
https://webliker.info/50549/

こういうのちゃんと自身で調査して、疑問点を具体的にして質問しよう。
ここは家庭教師サイトじゃないので。

[K_3578]

とりあえず、初心者であることは初心者マークが付いてればわかるので重ねてタイトル、本文で言わずとも結構です。

自分でpaddingとmarginの違いについてはググったりしていないのでしょうか？
基本的には自分で解決出来るのが1番良いので、調べた上で分からなければ
どこの記事を見て、どういうところが分からなかったかを明確に聞いてください。

[K_3578]

確かProgateは完全一致じゃないと正解にならなかった気がしますね(うろ覚えですが)

[girlChilly]

皆さんありがとうございます。Lhankor_Mhyさん、分かりました！その回答で納得しました。ありがとうございます！

リンクまでありがとうございます！次はもっと調べてから質問します????‍♀️貴重なお時間を割いて下さりありがとうございました。

[m.ts10806]

解決したあとに難ですが、タイトルに内容が全く無いので、あとから見る人のためにも要件のみ記載するようにしてください。
特に「初心者」とか質問タグにある単語をそのまま入れても質問内容見えてきませんからね

[girlChilly]

m.ts10806さん、ご指摘ありがとうございます????‍♀️

Answer 1

borderの外側に設定する余白がmarginで、内側に（コンテンツ領域との間に）作る余白がpaddingです。
要素が隣り合うとき、margin同士は足し算ではなく交じり合って大きいほうのmarginになります。

Comments

[girlChilly]

borderを基準に考えればいいんですね！すごく分かりやすいです。
また、新しい情報も学べました！本当にありがとうございました????‍♀️

Answer 2

<style>
.wrap{padding:0;margin:0;background-Color:yellow;border:solid 1px #000000;}
.wrap div{background-Color:lime;}
#div1{padding:50px;}
#div2{margin:50px;}
#div3{padding:50px;margin:50px;}
</style>
<div class="wrap">
<div id="div0">margin:なし,padding:なし</div>
</div>
<div class="wrap">
<div id="div1">margin:なし,padding:あり</div>
</div>
<div class="wrap">
<div id="div2">margin:あり,padding:なし</div>
</div>
<div class="wrap">
<div id="div3">margin:あり,padding:あり</div>
</div>

Comments

[girlChilly]

ご丁寧に具体例まであげて下さりありがとうございます????‍♀️！！