Negative Margins in CSS: Good Tutorial and Tricks Site

How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

Negative margins are valid in css and understanding their (compliant) behaviour is mainly based on the box model and margin collapsing. While certain scenarios are more complex, a lot of common mistakes can be avoided after studying the spec.

For instance, rendering of your sample code is guided by the css spec as described in calculating heights and margins for absolutely positioned non-replaced elements.

If I were to make a graphical representation, I'd probably go with something like this (not to scale):

The margin box lost 8px on the top, however this does not affect the content & padding boxes. Because your element is absolutely positioned, moving the element 8px up does not cause any further disturbance to the layout; with static in-flow content that's not always the case.

Bonus:

Still need convincing that reading specs is the way to go (as opposed to articles like this)? I see you're trying to vertically center the element, so why do you have to set margin-top:-8px; and not margin-top:-50%;?

Well, vertical centering in CSS is harder than it should be. When setting even top or bottom margins in %, the value is calculated as a percentage always relative to the width of the containing block. This is rather a common pitfall and the quirk is rarely described outside of w3 docos

Negative margins vs relative positioning

Relative positioning will shift the content to left, but the original space will be occupied by it unless you make the next element relative too. However with negative margin the content and its original space both are shifted.

CSS Margin Negative without Moving Parent Container

You can apply position:relative; top:-60px; on the element you need to shift up.

#el {
   position:relative;
   top:-60px;
   z-index: 5;
}

How to position two elements side by side?

Based on your comment, here is one way of achieving this:

#container { margin-left: 200px; width: 750px; } /* this is the comment area */
#container p { float: right; }
#container p.main { margin: 10px; width: 730px; } /* 730 + 2*10 = 750 */
#container p.comment { margin-left: -160px; width: 130px; border: 1px solid black; }

Note the use of negative margins to move the comment outside the container. I'e done a fuller example of this in negative margins in css: good tutorial and tricks site? with an example of how to put side notes on some text, which sounds a lot like what you're trying to achieve.

Additionally you could hide or show these side notes without changing the layout.

Negative margin leaves blank space

You can use negative margin instead of just top and left:

.offsetImage {
  float: left;
  width: 300px;
  position: relative;
  margin-top: -40px;   /* change to margin */
  margin-left: -40px
}

Updated Pen

How does bleeding works in CSS?

Padding-bottom at that value with stretch the background of the menu down far enough that it will always be seen to take up the whole length of the page. The margin adjustment gives the ability to still position content over this stretched out menu at a position according to the design of your site. Here is an example with the properties adjusted so that you can more easily see what is happening:

http://jsfiddle.net/PVKbp/23/

 .two
    {

   margin-bottom: -3200px;
    padding-bottom: 32000px;
    margin-left: 100px;
    margin-right: 100px;
    background-color: #aaaaaa;   
}

Negative margin not working

The .hhheader height is not changing because, the margin on the #logo does not affect the header size (which depends on the size of the logo), you're only moving the #logo, nothing more.

Is there a reason why don't you just set the height of the .hheader element. Something like

height: 190px;

https://jsfiddle.net/7hb9bd58/4/

OR, if you for some reason you are not allowed to do so, maybe you can just scale the logo, and it'll appear to overflow the header container

#logo {
    display:inline-block;
    transform: scale(1.3);
    margin-left:50px;
}

https://jsfiddle.net/7hb9bd58/5/

Margin auto goes to negative values

I removed the problem in browsers, when i use position: relative to the body element. Now its working in firefox and in other browser too. Live example on http://dev8.newlogic.cz

Can you explain css code like below?

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>

Negative margin with float for two-column layout

Use your browser’s developer tools, and play around with the margin-left value of the sub content – decrease (or rather increase?) it slowly from -100% to 0%, and you will see it move across the orange main content, then end up under it.

Under it is where it normally would go (without negative margin), because it is floated left, but it’s position in the DOM is after the main content. It would go right next to the also left-floated main content, if there was any space – but there isn’t any, because the main content is 100% wide.

By introducing a negative margin, that space is “created”. The negative margin “overwrites” the right edge of the element before the sub content, making the whole thing act as if that right edge was further to the left. When the right margin reaches -100%, it is as if the whole main element “wasn’t there” from the point of view of the left sub content – so it happily takes it’s place above the main content to the left of the wrapper element.

---

Related Topics