SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    display-inline-block margins do not collaspe with its neighbor?

    So instead of the margins between them becoming 20px they become 40px. Any work around for this aside from not using display inline-block or changing its margins?

    Code CSS:
    <!DOCTYPE HTML><html><head><meta charset="UTF-8">
    <title>Website Code Tutorials - Testing</title>
    <style type="text/css">
    div {
    margin:20px;
    background:red;
    }
    #two {
    display:inline-block;
    background:blue;
    }
    </style> 
    </head>
    <body>
     
    <div>test1</div>
    <div id="two">test2</div>
     
    </body>
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    display: table; seems to work better.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I realized that I really didn't need the top margin on the inline-block. But still interesting behavior that I have never noticed before.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,492
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Eric,

    Elements that create a "new block formatting context" such as floats, display:table-cell/row, inline-table etc (but not display:table), display:inline-block and absolute elements do not collapse their margins.

    An inline-block element behaves much the same as a float would with respect to its margins so there is no difference if you used a float - assuming that you need horizontal alignment which the display:table that Ralph mentioned won't do .

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys.

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    OK actually I didnt not need it. Double negative hard to follow huh. Anyways I need two anchors to display side by side as buttons. I need their margins to collapse top and bottom with their neighbors. And I need them both or just one anchor to clear (so stay above) their below neighbor. Some times there will be both and some times only one. Display tables margins do collaspe but they do not allow for both anchors to go side by side. I could just wrap it them both in a container but I dont want to.

    Ideas?

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    TEST PAGE

    Code HTML4Strict:
    <!DOCTYPE HTML><html><head><meta charset="UTF-8">
    <title>Website Code Tutorials - Testing</title>
    <style type="text/css">
    div {
    margin:20px 0;
    background:red;
    color:#000;
    }
    a {
    display:inline-block;
    margin:20px 0;
    background:blue;
    color:#000;
    }
    </style> 
    </head>
    <body>
     
    <div>Div</div>
    <a href="#">Anchor</a><a href="#">Anchor</a>
    <div>Div</div>
     
    <br><br>
    <p>Or it can be only one anchor</p>
    <br><br>
     
    <div>Div</div>
    <a href="#">Anchor</a>
    <div>Div</div>
     
    </body>
    </html>

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    [QUOTE=EricWatson;5329856I need their margins to collapse top and bottom with their neighbors.[/QUOTE]

    Maybe a dumb question, but can't you just remove the margins? When do you need them? Perhaps they could be added in just where you need them?

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ya that's obviously an option. Moving this site is a monster of a job. I'm adding these buttons to all these existing pages which are all different. And i cant use find and replace in this case. I want to be able to throw the buttons in any of them and it works in all situations. Part of that working in all is that the margins collapse. So on some pages I don't have 20px margin and on other pages 40px. I'm guessing there is no solution. In which case I will just wrap in in a P and margin that.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    There's always JS, of course.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,492
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    I could just wrap it them both in a container but I dont want to.

    That would be the best and most semantic approach as the inline elements need to be contained in a parent anyway. You should avoid running inline elements straight into block elements as that forces the browser to construct anonymous block boxes to hold the inline content and older IE "sometimes" gets this wrong.

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That would be the best and most semantic approach as the inline elements need to be contained in a parent anyway. You should avoid running inline elements straight into block elements as that forces the browser to construct anonymous block boxes to hold the inline content and older IE "sometimes" gets this wrong.
    ok thats what I will do - thanks guys . I usually ignore such things and rather shoot for less code is more. I have let go of ie6/7 and its liberating. Now ie8 is my ie6. I just need to keep it all working but it looks like poop in comparison with all its blocks no shadows and no transparency. Buts thats ok I just need it to function.


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
  •