Vertical margins, padding as a percentage of parent container’s width

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?

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s