SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2014
    Location
    Surrey, British Columbia Canada
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    List Items UL and LI

    I am trying to figure out how list items work with css. Sometimes examples show
    ul {list-style: none; margin: 0, padding: 0}
    and other times you declare this in the li
    li {list-style: none; margin: 0, padding: 0}

    Is there a reason that sometimes you declare this in the li and other times in the ul?

    Thanks - Gayle

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,824
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    I do not know the technical reasons and use colours to highlight the differences:

    Code:
    ul {list-style:none; margin:0, padding:0; background-color: #faa;} 
    
    li {list-style:none; margin:0, padding:0;  background-color: #aff;} 
    

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Coder preference , mostly. It is nearly impossible to judge code w/o knowing it's intended purpose, but I am assuming this was just part of standardizing reset CSS.


    SOME (not all) CSS properties , such as list-style for example, are inherited by descent elements. so setting the list-style for the UL is tantamount to setting to its LI children.
    Padding and margin are NOT inherited and am not sure if there was ever a time when the indent on a list was created from the default margin on the LI element, but that might account for what you are seeing.

  4. #4
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use one style for list, and apply it on <ul>:

    <ul style="list-style:circle">
    <li>asd</li>
    </ul>

    Or you can applay different styles for each <li> inside list:

    <ul>
    <li style="list-style:circle">asd</li>
    <li style="list-style:none">asd</li>
    <li style="list-style:square">asd</li>
    </ul>

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by GHgayle2014 View Post
    ul {list-style: none; margin: 0, padding: 0}
    and other times you declare this in the li
    li {list-style: none; margin: 0, padding: 0}

    Is there a reason that sometimes you declare this in the li and other times in the ul?

    Thanks - Gayle
    The list element doesn't have any default padding or margins but the ul does and whether it's left padding or left margin added to the ul varies between browsers (historically). Therefore it follows that the ul needs to be addressed to reset (or set) margin/padding explicitly. It then also makes sense at the same time to set the list style via the ul which as mentioned above is inherited into the children list elements saving the need for another rule.


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
  •