htmlcssalignmenthtml-lists

Does UL have default margin or padding

This might seem like a dumb question, but I've added an UL to a basic page and the list seems to be off-centered. There's nothing special about the list. No specific css added: just a list. When I load live it's slightly off center.
Is there a default margin or padding on the left side?

<h3>Title Heading</h3>
   <ul id="listItems">
       <li>itemOne</li>
       <li>itemTwo</li>
       <li>itemThree</li>
   </ul>

The main body has all the css code for centering, aligning, float, etc. The 'Title Header' align perfectly. Just list is a little off.

Thank you.

Oh, don't know if this is important, but I added the 'id' cause... wanted to use 'first-of-type' to give 1st item em(bold).

Solution

  • The problem is that by default, browsers have custom css - in chrome for example:

    ul, menu, dir {
   display: block;
   list-style-type: disc;
   -webkit-margin-before: 1em;
   -webkit-margin-after: 1em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
   -webkit-padding-start: 40px;
}

    You'll have to use a custom rule for your ul:

    element.style {
    margin-left: 0px;
    /* set to 0 if you're not using a list-style-type */
    padding-left: 20px;
}