cssのbox-sizingを利用して、余白やborderを内側にしてレイアウトをしやすくする。

2017/9/20 CSS

box-sizingを使用することで、要素のサイズ(width)を明確にすることができます。

box-sizingを使用しない場合

たとえばbox-sizingを使用しない場合で、40%と60%のbox要素にpadding 20pxをかけると

box-siing02

このようにはみ出てしまいます。これですとうまくレイアウトがとれません。
そんなときにbox-sizingを使用します。

box-sizingを使用した場合

box-sizingを使用すると、paddingborderの横幅や高さを、40%の中に含んでくれます。ですのでイメージで言うと

box-siing01

このようになります。便利ですね。

CSS

 

投稿者:気まぐれWEBLOG管理人