marginについて - CSS

marginは周りのボックスとの距離

marginの相殺

これのせいでややこしくなるらしい。今はよくわかっていない。

上下のmarginは重なることもある(条件が揃わないと重ならない)

CSSのmarginとは？paddingとは？余白の指定方法まとめの4.marginの相殺にも書いてあった

このサイトのmarginは心の距離って表現面白い！！

marginの指定の仕方

paddingと同様に5つある

• margin-top
• margin-right
• margin-bottom
• margin-left
• margin

また、marginの場合での、値の数によって指定される位置もpaddingと同じ

bodyはデフォルトCSSでmargin: 8px;となっている

ボックスを横並びにする

ボックスを横並びにするときには、floatを使った実装かflexboxを使った実装のどちらかがある。floatを使う場合には以下ポイントがある

1. 並べたい要素をdivで囲み、floatを解除する。overflow: hidden;を適用
2. 並べたい要素のwidthを指定
3. 並べたい要素をfloatで浮かせる
4. 並べたい要素の左右のどちらかのmarginを0にする

See the Pen ボックスの横並び by tamago (@tamago324) on CodePen.

1.floatを解除する

floatは解除しないとレイアウトがくずれるため

.wrapper {
    overflow: hidden;
}

2.横幅の指定

横幅を指定することで各コンテンツがきれいに並ぶため

.item {
    width: 100px;
}

3.浮かせる

横並びにするにはfloatで浮かせる

.item {
    float: left;
}

4.左右のどちらかのmarginを0にする

これをすると、上下左右が等間隔になるため、きれいになる？

左右のmarginは相殺されないため、上下左右で同じ幅になる

.item {
    margin: 10px 0px 10px 10px
}