CSS Negative margins

Defining CSS layouts with negative margins requires a high level of precision to ensure that all siblings are cleared effectively.
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.

I love to use negative margins in my designs.This allowed me to work with position easy with my css style.You can use this example for your testing:

#menu {
      margin:-20px auto;
      
}

In this case i use margin -20 in my menu.This margin move my menu up for 20px.If you set margin without negative value like this:

#menu {
      margin:20px auto;
      
}

your menu going to be moved down 20px.You can use negative margin in any of margins 0px 0px 0px 0px.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.

I hope this article help you to understand how negative margins work.

Do not use negative element in PADDING "period".That is illegal element and your site not going to be validate

» Posted in: Css Tutorials

This article hasn't been commented yet.