Remove left padding from a list (CSS)

Question

According to chrome's "inspect element" there's a padding-left:40px coming from "user agent stylesheet". I would like to avoid this without ignoring the user agent stylesheet for the rest of my web.

code: http://jsfiddle.net/FranLegon/kvhu2vg4/ img: https://i.stack.imgur.com/uMvKC.png

   <!DOCTYPE html>
    <html>
    <head>
        <style>li {list-style-type:none; padding:0; margin:0;} </style>
    </head>
    <body>
        <ul>
            <li>aaaaa</li>
            <li>bbbbb</li>
            <li>ccccc</li>
            <li>ddddd</li>
            <li>eeeee</li>
        </ul>
    </body>
    </html>

Try doing `padding-left` instead of just `padding` or adding it to the `ul` and not the `li`. — Waxi, Feb 10 '15 at 15:41
possible duplicate of [Can't get list to center when using UL](http://stackoverflow.com/questions/21891011/cant-get-list-to-center-when-using-ul) — TylerH, Feb 10 '15 at 15:52

score 2 · Accepted Answer · answered Feb 10 '15 at 15:40

2

The default padding is on the ul element - not the li elements.

ul { padding-left: 0; }

Updated Example

In most browsers, the ul has a default padding-left value of 40px.

ul {
    padding-left: 0;
    list-style-type:none;
}

<ul>
  <li>aaaaa</li>
  <li>bbbbb</li>
  <li>ccccc</li>
  <li>ddddd</li>
  <li>eeeee</li>
</ul>

answered Feb 10 '15 at 15:40

Josh Crozier

233,099
56
391
304

1

"default padding is on the ul element " +1; visual example of where the padding is: http://codepen.io/anon/pen/WbdojY – FelipeAls Feb 10 '15 at 15:53

score 1 · Answer 2 · answered Feb 10 '15 at 15:41

1

You should not only apply it to the list-items, but also to the list:

ul, li {
    list-style-type:none;
    padding:0;
    margin:0;
}

<ul>
    <li>aaaaa</li>
    <li>bbbbb</li>
    <li>ccccc</li>
    <li>ddddd</li>
    <li>eeeee</li>
</ul>

answered Feb 10 '15 at 15:41

GreyRoofPigeon

17,833
4
36
59

Remove left padding from a list (CSS)

2 Answers2