Can you explain css code like below?

Question

margin-left:-500px;margin-right:-500px;

What's the meaning ?Why do it like that ?

Answer 1

See here: http://www.communitymx.com/content/article.cfm?cid=b0029

Answer 2

Read this nice article: The Definitive Guide to Using Negative Margins

Negative margins are usually applied in small doses but as you’ll see later on, it’s capable of so much more. A few things to note about negative margins are:

1. They are extremely valid CSS

I’m not kidding on this one. W3C even says that, “Negative values for margin properties are allowed…” ‘Nuff said. Check out the article for more details.

2. Negative margins are not a hack

This is especially true. It’s because of not understanding negative margins properly that it got its hackish image. It only becomes a hack if you use it to fix an error you made elsewhere.

3. It goes with the flow

It does not break the flow of the page if applied to elements without floats. So if you use a negative margin to nudge an element upwards, all succeeding elements will be nudged as well.

4. It is highly compatible

Negative margins are wholly supported across all modern browsers (and IE6 in most cases).

5. It reacts differently when floats are applied

Negative margins are not your everyday CSS so they should be applied with care.

6. Dreamweaver doesn’t understand it

Negative margins don’t show up in the Design View of DW. Why are you even checking your site in Design View anyway?

Answer 3

It probably cancels out the 500px padding on the parent element:

<div style="padding-left: 500px; padding-right: 500px;">
   <div style="margin-left:-500px;margin-right:-500px;"></div>
</div>

Answer 4

i read once (reference forgotten) that negative margins are supposed to send elements out of the way, sending them to the left most side of the browser. It is meant to hide elements out of the browser if you dont want to use

style="display:none"

does the element with the negative margins behave this way?