結論から言う。
box-sizing: border-box が適用されている要素に「width」が指定されていないと、border-boxは効かないようだ。
<ul class="list">
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
</ul>
先日久しぶりにコーディングをしていると、上記のような例でimg要素にbox-sizing:border-boxを適用し、さらにpadding、borderを指定したのだが、border-boxが効かなかった。
詳しく説明すると、li要素はfloatで横並びにしており1行3列の画像リストを作ろうとしていた。
ところがborder-boxが効かなかったため、borderのサイズ指定により段違いになってレイアウト崩れが起きてしまった。
このような場合、img要素にwidthを指定してあげると良い。
親要素のlistが900pxの場合、widthを300px以内で指定すればborder-boxが適用され、1行3列に収まる。
久しぶりとは言え、単純なところでつまづいた。
たまにはコーディングもしておかないと腕が鈍るな。