width,heightで100%から◯px引く方法

レスポンシブルデザインやUIデザインでwidth:100%;など%で指定し、なおかつbordar(周辺線)を1px引きたい場合やpaddingをpxで指定する必要がある場合に使える技

calc()を使う

calc()で『+・−・×・÷』を使った計算値を返すことができるので、100%からbordarやpadding分のpxを引いた値を指定することができる

width:45%から
border-left:10px
border-right:10px
padding-left:10px
padding-right:10pxを引く

box-sizingを使う

box-sizing:border-box;を使えばborderやpaddingをblock要素のマイナス値として指定することができるので%指定に影響しない

通常だったらwidth:45%に
border-left:10px
border-right:10px
padding-left:10px
padding-right:10pxが加算されるが、
box-sizing:border-box;を指定することで上の45%からそれぞれを引いたのと同じ大きさになる

この記事が気に入ったら
いいね ! お願いします(><;)

投稿者:和禅雅

この記事へのコメント