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%からそれぞれを引いたのと同じ大きさになる
この記事へのコメント