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. ( 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?


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s