Search code examples
htmlcss

CSS set li indent

I have drop down main menu which uses lists as its basis. The problem is, the lists are very wide, and they do not indent far enough when expanded. So, this is my problem! How do I make the indent amount on lists larger via CSS?

Solution

  • 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/