Warning: Trying to access array offset on false in /home/hysweb/cocohp.com/public_html/wp/wp-content/themes/pro/functions.php on line 837

Warning: Trying to access array offset on false in /home/hysweb/cocohp.com/public_html/wp/wp-content/themes/pro/functions.php on line 838

Warning: Trying to access array offset on false in /home/hysweb/cocohp.com/public_html/wp/wp-content/themes/pro/functions.php on line 839



◎ CSSを学ぶ,  ■ Webデザインを学ぶ【初級/後編】

box-sizing

ボックスサイズの算出方法

通常、ボックスのサイズを指定する際、ボックスは、マージン・パディングの値を含めて算出します。
例えば、横幅300pxのボックスに、上下左右パディングを10pxずつ、2pxのボーダーを設定すると、
左右のパディングが20pxと左右ボーダーが4px加算されるため、実際の大きさは、324pxになります。
ところが、box-sizingを指定すると、ボックスの幅と高さの値に、ボーダーとパディングの値を含めません。

想定外にボックスが大きくなったりする現象を防ぎ、レイアウトの設計がし易くなります。