SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    When to use top and when to use margin-top

    Hi when making an element relative, when should I use margin-top and when should I use margin-top? Are they the same?

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Yes, margin-top and margin-top are the same.

    But I suspect that wasn't what you meant to ask.....

  3. #3
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    when making an element relative, you are supposed to use top. why:

    1. margin-top has to do with the element's box model. it adds to its box model height.
    2. top has to do with its position, the offset. the offset leaves the box model's height at the same value.


    that says top and margin-top are not the same.


    so: top is the same box, but moved, margin-top is a "taller" box. by position:relative you declare your intention to move the box, not change it to a bigger one. so top it is



    on the side note: position:relative has two effects:
    • the element will still occupy its box model space at the position where he was previously before being moved using top, left.
    • it will appear "floated" to the new position, that is, w/o taking space, like being taken out of the normal flow at its new position.


    using only margin-top on a position:relative element will only "move" the content inside it, the element will be found at the same offset.

  4. #4
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,506
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Though I'd point out negative margins can make an element appear over/under another one due to the size of it's 'flow box' (what noonope calls box model space) shrinking... It's flow is smaller, but it's drawn at it's full size. In those cases, you MAY end up using position:relative on it to make sure it depth sorts how you want --- either by using z-index, or simply that position:relative and/or absolute elements always depth sort over non-positioned elements.

  6. #6
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks my mistake as you realised I was asking about the difference between margin-top and top. I understand the difference now.

    Also on a related note I was speaking to another dev who told me that he always puts position:relative to all elements in the CSS Reset. Is this good practice?

  7. #7
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @noonnope so when using margin-top on a position-static element, the element will actually move and not be found at the same offset?

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no, the element will keep the offset, it will just have a "taller" box model. its content will actually move, i.e. the margin top values will affect the offset (like top, for example) for the elements inside it and for those that calculate their box model based on its box model, like the elements after it.

    margin-top has to do with the box model of an element.

    top has to do with the offset for the box model, the box position inside parent elements, if the element is not static. if its position is static, top has no effect on it.

  9. #9
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by drtanz View Post
    Also on a related note I was speaking to another dev who told me that he always puts position:relative to all elements in the CSS Reset. Is this good practice?
    What about that, is it good practice to do this?

  10. #10
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's not something good or bad if it doesn't have a reason. give me a reason to do something like this and we'll see.

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Also on a related note I was speaking to another dev who told me that he always puts position:relative to all elements in the CSS Reset. Is this good practice?
    Internet Explorer has a bug when the body is made position: relative, so I'd not do it myself. However, someone may have put it in a reset in order to combat other bugs (this may be why your dev does this), but I would say it's not a good idea.

    If you use something like Chrome's Inspect, Opera's Dragonfly or Firefox' Firebug, you can see the amount of space an element is taking up with margins vs positioning (margins can be highlighted which I find useful since I can't otherwise make margins visible).

    The elements are kind of like house shingles, except they overlap the other way (from bottom of the page to top). Ew, like petting a snake backwards!


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
  •