発程した問題

・例えばwidthが20%の要素が5つ横並びになっていた時に、左右にpaddingを付けて余白を取ると、要素の幅の合計が100pxを超えてしまい、レイアウトが崩れる

何故か

・端末のwidthは通常100%となっているので、上記の例だと既に要素のみで100%に達している。これにより、paddingやborderなどを付けるとオーバーしてしまい、収まらない要素が下に回り込んでしまうので、レイアウトが崩れてしまう。

対策

・要素自体の%をpaddingを含めても100%を超えないように調整しても良いが、
box-sizingプロパティをborder-boxにすることで解決！

box-sizing:border-box;とは

・widthの合計にpaddingやborderを含めてくれる！

注：margineは対象外

例

・box-sizing: border-box;なし　→ 要素20px + padding10px = 30px

・box-sizing: border-box;あり →　要素20px + pdding 0px = 20px

(実質はpadding10pxが付く)

記入例

* {
  box-sizing:border-box;
}
＊全ての要素に対して box-sizing: border-box; を指定

注：box-sizing: border-box;は全ての要素に対して指定することが推奨されている