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

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

calc()を使う

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

See the Pen <a href='http://codepen.io/wazenmiyabi/pen/Wxpygp/'>Wxpygp</a> by 和禅雅 (<a href='http://codepen.io/wazenmiyabi'>@wazenmiyabi</a>) on <a href='http://codepen.io'>CodePen</a>.<br />

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

box-sizingを使う

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

See the Pen <a href='http://codepen.io/wazenmiyabi/pen/MepXzQ/'>MepXzQ</a> by 和禅雅 (<a href='http://codepen.io/wazenmiyabi'>@wazenmiyabi</a>) on <a href='http://codepen.io'>CodePen</a>.<br />

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

HTML5 & CSS3の知識