SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Spacing overflow

    Hi hope everything well, I noticed a spacing problem with my webpage I'm working on. I am using HTML 5 which sets new tags such as "article" and "nav" to display as block, but i do not think that is a problem because "divs" are naturally set to display as block. What I'm noticing is the margin on the tags like "p" and "h1" are overflowing from the divs, so to fix this I display them as inline-block, which fixes my spacing issue. Would this method be the most educated choice or would there be another way to deal with this problem? Any input is appreciated, thank!

    Heres an example.
    Last edited by ralph.m; Jan 1, 2013 at 15:40. Reason: removed large size

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    A better option is to put something like a 1px padding on the top and bottom of your header, article and footer (just as you would on a div). What you are seeing is called "margin collapse", and it's expected behavior.

  3. #3
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, margin collapse can be a tough cookie. The 1px padding trick worked fine, i also found that using a mixture of margins and overflow carefull will address the issue of my margin collapsing.
    Check it out

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Another option is to put a 1px border on the container.

  5. #5
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okey i didnt want to do that add first becuase it would ruin a pixel perfect layout, but a simple negative top margin of 1px fixes that.


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
  •