#注意
この記事の投稿者は、
marginとpaddingを正しく全て理解していません。
わかったことがあり次第、臨時更新をしていく。
備忘録兼・投稿者成長型の記事です。（読者は何も得をしない記事ですね）
#marginとpaddingの基本
content 要素の中身
padding 要素内の余白
border 要素の線
margin 要素外の余白
このようなCSSの余白の考え方をボックスモデルと呼ぶ。
#marginの無効
##噛み砕いて見てみる
「譲り合いがたくさん行われている」
某Dリゾートでは、毎日楽しいパレードやショーが行われている。
見たことある人はわかると思いますが、だいたい席取りをしてから見ますよね？
もちろんですが、席で見るということは隣の席がある訳です。
隣の席の人からすれば、あなたは隣の席の人です。
ということは、席の間の若干の空間の譲り合いがあるわけです。
荷物をほとんど置いていない人。赤ちゃんの荷物をたくさん置いている人。見ながら食べる食べ物を置いている人。たくさんお土産を買った人。ミニゲームで大きなぬいぐるみを取った人。訳わからんけどたくさん荷物ある人。いろんな人がいると思います。
そんなとき、私たちは荷物を席の間の若干の空間に置きます。（今回はそういうことにします。）
日本人はいろいろな場面において、譲り合いが発生します。
そして席の間の若干の空間は、とても狭いスペースです。
そうすると、だいたい人間は席やスペースを詰めて全てが入るようにします。
そうしても、無理があるほど狭いときがあります。
そう、どちらが多めに席の間の若干の空間を使うか譲り合いが発生する訳です。
ここでは、荷物が少ない方が席の間の若干の空間を荷物が多い方に譲ります。
##真面目に見てみる
###01. ことばを変換
席の間の若干の空間 を margin
譲り合い を 無効
荷物が少ない方 を marginの値が小さい方
荷物が多い方 を marginの値が大きい方
という風に変換します。そして、解説していきます。
###02. コード
<body>
<div class="bottom">
<h1>margin-bottom: 10px;</h1>
</div>
<div class="top">
<h1>margin-top: 30px;</h1>
</div>
</body>
* {
margin: 0;
padding: 0;
}
body {
color: #fff;
font-family: 'Noto Sans JP', sans-serif;
}
div {
padding: 10px;
width: 100%;
height: 200px;
}
.bottom {
margin-bottom: 10px;
background-color: #2fd3a1;
}
.top {
margin-top: 30px;
background: #6730d1;
}
###03. 結果
上の要素がmarginの値が小さい方、下の要素がmarginの値が大きい方である。
上の要素の方がmarginの値が小さいので、無効となる。
DEMO
#参考にさせていただきました
CSSのmarginとは？paddingとは？余白の指定方法まとめ