The Positive Side of Negative Margins
I’ve been thinking negatively once again and instead of keeping my thoughts to myself I thought I’d share them with you. In this article we look at how negative margins work and how to apply them in everyday usage.
A number of people suffer under the misconception that negative margins are in some way a hack; they are not. In fact negative margins are valid CSS and extremely useful in certain situations. They only become a hack if you are using them to fix an error that you have made elsewhere. In normal usage negative margins work quite well and are supported across modern browsers. However, there are issues if you use negative margins on the opposite side of a float (e.g. floating left and then using a negative margin on the right) although most modern browsers now behave the same way when this happens. In some of the examples below you will see what I mean. Let’s dive in!
Negative Margins on Static Elements
First we’ll look at how non-positioned (static) elements behave when negative margins are used. In order to do this we need a point of reference so we can see the effect. Therefore we will construct a number of paragraphs that all have a 20px top and bottom margin. You may recall from my collapsing margin article that adjacent margins of static elements will collapse into one margin. So each paragraph will be 20px apart.
klick here for original post
http://www.search-this.com/2007/08/01/the-positive-side-of-negative-margins/
