CSS rules that define negative margins?

HTML & CSS
1

I think I’ve got a pretty good grasp of CSS principles at an intermediate level, but today I saw something that I can’t figure out.

I’m studying a page (http://www.nodebeginner.org/) whose style sheet defines rules like this:

p {
   margin-bottom: 48px;
   margin-top: -22px;
}

pre {
   margin-bottom: 64px;
   margin-top: -24px;
}

ul {
   margin-bottom: 64px;
   margin-top: -24px;
}

ul li {
   margin-bottom: 12px;
}

h2 {
   margin-bottom: 36px;
   margin-top: 64px;
}

h3 {
   margin-bottom: 36px;
   margin-top: 36px;
}

I think I understand what the rules are doing, but not why. What’s the purpose of defining negative margins?

2

Negative margins are sometimes handy for pulling an element in a particular direction. In those examples, the elements are being pulled upwards by the specified number of pixels.

3

Negative margins are typically used to reposition objects on a page. It’s difficult to be more precise without knowing the context and the HTML being affected. Sometimes, they can be misused.

Looking at the source code for the page that you referenced, I found the following:


#ibookstore-banner {
    display: none;
    margin: -10px -10px 0;
}

Because this is the first container inside of the <body> element, I wondered why the negative margins were being used.

The reason is simple enough…


body {
    background-color: #EEEEEE;
    font-family: Georgia,serif;
    padding-top: 0;
}

Browsers apply a default margin (assumed to be 10px) inside the viewport. This author assigned the negative margins so the background image in that first container (when it’s visible) would flow to the very edges of the viewport.

Negative margins can be amazingly useful but are often misapplied because the coder is unaware of HTML defaults, such as those around lists.

This is a pretty simple answer. Hope it helps.

4

I wrote this about 7 years ago but its still a nice introduction into the behaviour of negative margins and explains most of the characteristics than you can expect.

Things you also need to know in detail are how collapsing margins work as that has consequences that many find unintuitive.

Bear in mind also that negative top margins on a cleared non floated element will have no effect.

5

OK here are some ‘guidelines’ CSS is very context dependent so you should think of concepts as a guide , not a rule. So here are some of my quikie guidelines.

#1. Margins affect the flow.
#2. Negative margin is just that , negative. If positive margin move the element in one direction, negative margins, conceptually, move it in the OPPOSITE direction
#3. HORIZONTALLY SPEAKING: Left negative pulls the object leftwards. negative right margins CAN suck the ADJACENT element IN THE CODE toward the element.

#4 if the element is not floated and has no explicit width it can serve “expand” the element beyond 100% but the amount of negative margin set:

		.wrap{outline: 1px solid red}
        .in {margin:0 -10px; background: pink;   }
 
	<div class='wrap'><div class='in'> I am an lement with negative margin</div></div>

now try floating .in and/or giving it width:100% and you will see the different behaviours

#4 VERTICALLY speaking: you can use the negative position the element ( or further refine the position it if you have used position: relative/fixed/absolute; ) but remember that in some cases you may have to deal with margin collapse/margin sums.
hope that helps