Unordered List (<Ul>) Default Indent

Unordered List (<ul>) default indent

It has a default indent/padding so that the bullets will not end up outside the list itself.

A CSS reset might or might not contain rules to reset the list, that would depend on which one you use.

How to remove indentation from an unordered list item?

Set the list style and left padding to nothing.

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

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

<ul>  <li>a</li>  <li>b</li>  <li>c</li></ul>

CSS set li indent

to indent a ul dropdown menu, use

/* Main Level */
ul{
  margin-left:10px;
}

/* Second Level */
ul ul{
  margin-left:15px;
}

/* Third Level */
ul ul ul{
  margin-left:20px;
}

/* and so on... */

You can indent the lis and (if applicable) the as (or whatever content elements you have) as well , each with differing effects.
You could also use padding-left instead of margin-left, again depending on the effect you want.

Update

By default, many browsers use padding-left to set the initial indentation. If you want to get rid of that, set padding-left: 0px;

Still, both margin-left and padding-left settings impact the indentation of lists in different ways. Specifically: margin-left impacts the indentation on the outside of the element's border, whereas padding-left affects the spacing on the inside of the element's border. (Learn more about the CSS box model here)

Setting padding-left: 0; leaves the li's bullet icons hanging over the edge of the element's border (at least in Chrome), which may or may not be what you want.

Examples of padding-left vs margin-left and how they can work together on ul: https://jsfiddle.net/daCrosby/bb7kj8cr/1/

Removing ul indentation with CSS

This code will remove the indentation and list bullets.

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

http://jsfiddle.net/qeqtK/2/

CSS unordered list indent space to the left and right

Simply add padding: 0; to #main ul or .idTabs and that fixes your problem.

Also you may want to move list-style: none; from #main > li, #main > ul > li to #main ul as well: it's just nicer semantics.

The padding comes from the user default stylesheet. If you inspect the <ul> tag you'll notice something along the lines of -webkit-padding-start: 40px;. So by setting padding:0 we are ensuring all browsers have no padding, thus solving your problem. It's a good habit to add margin:0; and padding:0 to ensure all browsers look the same (if not, at least have more resemblance).

How do I indent an unordered list properly? margin-left won't work!

You need to apply the margin-left: 0; to the li itself.

.bullets li {
margin-left: 0;
padding-left: 0;
}

You might find you also need to apply it to the ul aswell.

.bullets ul, .bullets li {
margin-left: 0;
padding-left: 0;
}

Check also that that table and td do not have any padding or margin applied to them.

.bullets, .bullets td, .bullets ul, .bullets li {
margin-left: 0;
padding-left: 0;
}

Hope this helps.

How to indent the text in a custom unordered list

Set the li to position: relative; and then your pseudo element to position: absolute; along with a negative left value. Adding relative positioning will make sure that your absolute positioned pseudo element will position itself based on the location and size of the li.

ul {    list-style: none;    padding: 0 0 0 45px;}ul li:before {    content: "♦";    color: #E55302;    position: absolute;    left: -15px;}li {  position: relative;  }

<ul> <li>This is the first entry but only goes one line</li> <li>This is the second entry but only goes one line</li> <li>This is the third entry but it can go many many many lines and sometimes even a whole paragraph and I would like the text to be indented from the bullet.</li> <li>This is the fourth entry but only goes one line</li> <li>This is the third entry but it can go many many many lines and sometimes even a whole paragraph and I would like the text to be indented from the bullet.</li></ul>

bulleted list with different indentation

<ul style="padding-left:20px">
    <li>Element 1</li>
    <li>Element 2</li>
</ul>

I think the default indentation is 40px, this halves it.

---

Related Topics