1 reply [Last post]
artcoder
artcoder's picture
Offline
Enthusiast
Last seen: 8 years 23 weeks ago
Timezone: GMT-8
Joined: 2005-07-27
Posts: 69
Points: 0

I'm seeing some Drupal code that looks like ...

margin: -1.5em -26px 1.5em; padding: 1.5em 26px;

I understand what it means when margin has 2 values and when it has 4 values. But I had never seen it used with 3 value.

What is that a shortcut for? And more importantly what is it trying to do with that margin and padding combination? Why a negative margin and then pad it by the same amount?

I have never seen that technique before. Any tutorials on this technique (or hack perhap?)

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 38 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

When you only specify three

When you only specify three values it means that top and bottom are different but left and right are the same.

The negative margins would be for an element that is placed inside another element with those negative values as padding in cases where you want all elements to be padded except for the one with negative margins which you want to butt up against the edges of the container with the padding.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference