CODEWITHSUNDEEP
htmllistcss
FranLegon
FranLegon

Reputation: 95

Remove left padding from a list (CSS)

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.sstatic.net/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>

Upvotes: 1

Views: 3546

Answers (2)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

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>

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240918

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>

Upvotes: 2

Related Questions