CSS box model issue: box-sizing + 100% height + border + inline-block

Question

Take a look at this fiddle: http://jsfiddle.net/WTcgt/

Why is the BOX1 pushed down by the amount of border of BOX2? Is this a bug?

Answer 1

The box-sizing property is supported in Internet Explorer, Opera, and Chrome.

Firefox supports an alternative, the -moz-box-sizing property.

Safari supports an alternative, the -webkit-box-sizing property.

here is working example http://jsfiddle.net/WTcgt/2/

This is the behavior of inline-block:

An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.

use vertical-align:top to avoid this problem. If we doesn't use vertical-align property then elements align in same line based on adjacent element. For more information read http://www.impressivewebs.com/inline-block/ and http://www.brunildo.org/test/inline-block.html