Margin question

Discussion in 'Web Design and Development' started by andyjamesnelson, Oct 4, 2008.

  1. andyjamesnelson macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #1
    Hey I am having a problem with understanding a certain aspect of margin within css.

    Heres the problem I don't understand:

    <style type="text/css">

    *{margin:0; padding:0;}

    #header {height:100px; background-color:#CCCCCC;}

    #header p {margin:10px 0 0 10px;}
    </style>
    </head>

    <body>
    <div id="header">
    <p>Hello</p>
    </div>

    What I don't understand is why does applying a margin-top to the <p> making the containing div id="header" jump down 10px on screen but not left 10px - in this case just the text moves.

    Why doesn't the text just move with margin-top:10px?

    I'm not moving the containing div. I'm telling it to move the <p> no?

    I really don't get this.

    Thanks, Andy

    </body>
    </html>
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Yeah, it can be a little confusing. Remember though, that a div is just a container. If you wanted to move the p without moving the div you would either using padding (on the div) instead of a margin (on the p), or you could have the p positioned relative (on the p) and use top to move it down. There's space on the left of the p because the div automatically takes up full width.
     
  3. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #3
    But If I do this:

    <style type="text/css">

    *{margin:0; padding:0;}


    #header {height:100px; background-color:#CCCCCC; width:100px;}

    #header p {margin-left:10px;}




    </style>


    </head>

    <div id="header">
    <p>Hello</p>


    </div>

    <body>
    </body>
    </html>

    Then the only the <p> moves and does what one would imagine has a border-left of 10px from the edge of the div.

    ? Andy
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Like I said, a div fill the whole width no matter what's inside of it. The left spacing has nothing to do with the CSS applied to the p.
     
  5. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #5
    Hey,

    Wow now I am really confused :p

    You did notice I gave the div a width in the last example?

    How do you mean the space has nothing to do with the css? Isn't directly to do with the margin-left:10px because that space wouldn't be there without it?

    Andy.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    I did miss that width, but doesn't really change things.

    I said the left space has nothing to do with he p's CSS from the div's perspective, meaning that the div will have the same width no matter what CSS is applied to the p. That's what I meant. Though it was not clear. I won't say this is an easy concept to completely grasp, and obviously hard to explain as well.
     
  7. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #7
    Ok I get that.

    What I dont get is why the div moves down 10px when I use margin-top:10px on the <p> and why it doesn't move left when I use margin-left:10px on the <p> if the div has a discreet width.

    The I understood things is that margin was the space around on objects border.

    So apply a margin to a <p> within a div I am affecting the space around the <p> in the div and not affecting the positioning of the div in anyway.

    However like I said margin-top:10px on the <p> within the div makes the div drop down 10px and not the <p> inside it?

    Andy
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    See if the linked article below helps clear things up for you. I'm talking myself into circles so I'll stop explaining it myself.

    http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41
     
  9. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #9
    Hey,

    I believe I do understand the box model and I also read the article.

    I still do not understand why the div drops down just when I use margin-top:10px on the <p> within the div.

    I know I could use padding-top:10px on the <p> and only the <p> would move and the div would remain in the same place.

    In general then one should use padding to position text etc within divs?

    Also whilst I am hear you know how easy it is to center a page using margin:0 auto... is there a way to center the page top / down in the same way?

    Andy.
     
  10. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #10
    also centering text top / down within divs like the text-align:center would do for left / right?

    andy
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
  12. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #12
    thanks dude sorry if my not understanding is annoying :p
     
  13. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #13
    No, it's not annoying at all. At least your willing to ask questions.
     
  14. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #14
    Ha... yeah the whole point of the forum right?

    Andy
     
  15. memco macrumors 6502

    Joined:
    May 1, 2008
    #15
    Vertical alignment can be done on inline items (spans, links, etc.). This article might help a little bit. It's more or less a tutorial on the display: inline-block property, but it has some helpful information. There's plenty of info on centering, and several methods, all of which have positive and negative sides to using them. Unfortunately I can't find a better link right now, but more useful information exists.
     

Share This Page