marginでコンテンツを小さくする

https://gyazo.com/c771ef1fd2c3f1f1f551f03d9c02d8d1 https://codepen.io/mrsekut/pen/QWVbmPz

こういう感じのレイアウトを作りたいときを考える

親(lightblue)は、paddingを持っている

content 0とcontent 3は、width: 100%で広がっている

その中で、content 1やcontent 2のように、少し縮んでいるものを並べたい

この時に、この2つのCSSをどうやって書くか？

content 1は以下のように書いている

marginを使っている

code:html

<div class="item mini">content 1</div>

code:css

.mini {

margin: auto 2rem;

}

content 2は以下のように書いている

paddingを使っている

code:html

<div class="item">content 2</div>

</div>

code:css

.p-content {

padding-left: 2rem;

padding-right: 2rem;

}

無駄にdivが一つ増えている

理想的には、1の書き方になるはず

CSSのBox Modelを理解しないといけない

「子を置くための空間」というのがまず最初にあって、

それに対して、margin/border/padding/contentの割合を指定しながら配置している感じ

なので、paddingに対するイメージと全く同じイメージでmarginを扱えばいい

content自体が主体なのではなく、marginの外の枠が主体であることを認識するmrsekut.icon

このメンタルモデルが自分の中にないの、Figma使っているのが原因かもなというのを一瞬思ったmrsekut.icon