This is a common issue with inline
elements. To solve this, simply add vertical-align:top
.
#foo {
background: #fff;
vertical-align:top;
}
It's worth noting that the default value for the vertical-align
property is baseline
. This explains the default behavior. Values such as top
, middle
, and bottom
will correct the alignment.
Alternatively, you could make the element block
level. (example)