SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS rules that define negative margins???

    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:

    Code:
    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    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. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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:
    Code:
    #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...
    Code:
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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:
    Code:
    		.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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •