SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to add padding & margin to LI elements with display:table-row?

    I've got a series of li elements in which I've applied the display:table-row property to.

    One I've done this, it appears that the elements no longer respond to padding or margin settings. How can this be done?

    .someDiv li {display:table-row; margin-top:20px; padding-top:20px;}

    Neither the padding or margin settings have any effect on the layout of the li elements.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hm, you could do something like this to get the padding working, though margin still seems not to work:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    
    <title>Experiment</title>
    	
    <style type="text/css" media="all">
    ul {display:table}
    li {display: table-row;}
    li div {display:table-cell; padding-top: 20px;}
    </style>
    	
    </head>
    
    <body>
    <ul>
    <li><div>text</div></li>
    <li><div>text</div></li>
    <li><div>text</div></li>
    </ul>
    
    </body>
    
    </html>
    Perhaps you could also use bottom margins on the divs to make up for the lack of top margins (and thereby get the same effect?)

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Ralph: thanks for the quick help.

    If at all possible, I'd really like to find a solution that does not require me to add div wrappers inside my li elements.

    Do you think this is the only way to achieve padding and margin on elements with display:table-row?

    Also, why do you have to set the display:table on the parent element? Isn't it implied if the child elements are table-row?

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    [QUOTE]Also, why do you have to set the display:table on the parent element? Isn't it implied if the child elements are table-row?[QUOTE]
    Some UA's require this.

    Note that when you set Display:table/display:table-row, etc you are actually causing the element to display as such. So, attributes that can not be applied to a table row.. cant be applied to any element with display:table-row. In another words, since you cant adjust the margin for a <tr> you also cant do it for a <div style:"display:table-row">

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post
    If at all possible, I'd really like to find a solution that does not require me to add div wrappers inside my li elements.
    Onliy in gecko
    Code:
    li:before{content:" ";display:block;height:20px}
    Otherwise you will just have to make space on the inner elements instead which I assume you have already in place.

    Also, why do you have to set the display:table on the parent element? Isn't it implied if the child elements are table-row?
    Older browsers used to have problems with that and needed the complete structure but I think modern browsers are mostly ok but it does no harm to add them where you already have an element available.

    Older Gecko (ff3-) used to break when display:table code was used inline without the proper structure but was fine when used in an external stylesheet.


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
  •