I can't remove the margin with <li> [duplicate]

This question already has answers here: Removing ul indentation with CSS (3 answers) Closed 4 years ago.

Do you know why I can't remove the margin from my <li> elements? The browser always adds the specific margin for my list, even when I write the code a specific margin. Here is the CSS and HTML code:

#NavLeftList {
    height: 57 % ;
    width: 15 % ;
    position: absolute;
    top: 23 % ;
    开发者_Go百科border-style: none;
    background: url(images / heaven.jpg);
    margin: 0px
}

#NavLeftList ul {
    margin-left: 11 % ;
}

#NavLeftList ul li {
    text-align: center;
    width: 170px;
    list-style-type: none;
    text-decoration: none;
    margin: 10px 0px 0px 0px;
    padding: 1px;
}

#NavLeftList li a {
    height: 35px;
    padding: 10px 0px 0px 0px;
    text-decoration: none;
    color: #fff;
    background: url(images / tabright.gif);
    display: block
}

#NavLeftList li a span {
    padding: 0px
}

#NavLeftList li a: hover {
    color: #7EC0EE;
}

I haven't pasted the HTML code here since it was appearing strangely.

---

What you’re seeing isn’t a margin on the lis, it’s padding on the ul.

Zero out the ul’s padding.

---

try list-style-position:inside; on the li. It's probably leaving space that would be filled by the bullet even though you've set list-style-type:none;

---

Try setting

body{margin: 0;}

or find the containing element for NavLeftList and set that element's margin to 0 as well.

---

Try following CSS for UL

ul { list-style: none; }

---

Try making use of a reset.css file which will reset all "default" (and thus different) implementations of paddings and margins in the different browsers.

Example: CSS Reset