It struck me as odd at first when I realized that, when expressed as a percentage, an element’s margin-top property is computed based on its parent container’s width as opposed to its height. (http://www.w3.org/TR/CSS2/box.html#propdef-margin-top) The same goes for its margin-bottom property, as well as for any vertical padding such as padding-top and padding-bottom.
After thinking about it some more, it does make sense this way. Specifying an element’s margin as simply 5% will result in the same amount of pixels on all sides of the element.
Is this a total “Duh” moment, or what? Was anyone else tripped up by this?