Question

i read that negative margin-top and left takes the element and pushes it in this direction. On the other hand negative bottom and right margins draw the rest of the content over the element.

Question

I have a floated element float:right; wrapped in the body tag. Negative left margin will move it to the left.

Negative RIGHT margin wont do anything at all because the document ends where this negative margin starts and there is nothing to draw over the element (or pull over it)?

Am i correct?

Answer 1

Many people believe the same misconception about negative margins. The behavior you describe tends to match many negative margins cases, but it is explaining them from a flawed perspective. Actually, negative margins have the same effect on any side of the box, but not in terms of “move the box” or “draw other content in”.

For example, a left-margin: -20px means “position the element as if its left edge were 20 pixels inwards from its true left edge”. A right-margin: -20px means exactly the same thing, but for the right edge.

In the simplistic description you have provided, the negative left margin would indeed shift the element itself leftwards, because its left edge is placed adjacent to the previous element’s right edge, but the browser pretends that our element’s left edge is actually moved rightwards, so the content of the element itself appears moved leftwards.

With the negative right margin, the browser places the next element’s left edge adjacent to our element’s right edge, but it pretends that our element’s right edge is moved leftwards, so the next element itself appears moved leftwards.

In both cases, the only thing that is changed is the browser’s notion of the position of the element’s edges.

When you have a right-floated element, the browser will position it so that its right edge will be adjacent to the left edge of the previous right-floated element, or if there is no previous right-floated element, it will be adjacent to the right edge of its position parent (which is the closest parent element with a position style that is not static). In your case you don’t have a previous right-floated element, so the browser positions your element so that its right edge is adjacent to the parent’s right edge, but it pretends your element’s right edge is moved leftwards, so your actual content is moved rightwards, protruding outside of the parent element.

Here is a demonstration. The box with the blue border has negative left and right margins. The yellow box inside it represents how the browser considers it — it is narrower than the blue-bordered box, because the negative margins tell the browser to move its edges inwards, eating from the element’s actual size. As you can see, its positioning box is placed exactly as any element would be, touching its left and right siblings on both sides. And the actual content extends in both directions by exactly the same amount, because its negative margins are the same. The perceived change is that the element itself is moved left due to its left margin, and following content is moved left due to its right margin, but as you can see, in reality, the effect is exactly the same on both sides.