Quick Tip – Simplify List Margins with CSS

Quick Tip – Simplify List Margins with CSS

After working with CSS for a while, it’s easy to think that you know every single property available. Today’s quick tip in CSS is a reminder that there are still overlooked (but worthwhile) styles out there.

Have you ever set default margins for a layout, and then had to go back and manually adjust all of your lists? By default, list item markers have a negative positioning in relationship to the list item itself. This means that zero-ing out margins automatically leads to an overflow if the list is contained inside anything else.

Wouldn’t it be easier to put the list item marker at the same starting point as other elements instead? Lucky for us, there’s a style to help do just that. Allow me to introduce the list-style-position property.

Meet list-style-position

The list-style-position property is an easy way to change the basics of how an item is displayed. With it, you can specify if the item markers (e.g. bullets) appear outside the designated area, or leave it hovering outside to the left. It may sound like a small change, but the results can make life much easier when arranging a page.

To take advantage of the positioning property, you can assign the following property to your list CSS selectors.

Prefer writing CSS in shorthand? This style can also be included under the list-style property to keep things neat.

Simple Margins

I find that the inside style is much easy to work with, especially when it comes to margins. If default margin and padding values are set to 0 on all elements, a list with a style of “inside” will still display the item markers.

Take a look at the screenshot below for an example:

List Positioning Demo

Looking for a better example? Check out the demo page for more.

This probably isn’t a change you’ll need to make on every web layout from this point forward, but it is a good property to be aware of. If you’re ever struggling to piece together margins, consider setting your list’s positioning to inside. It may save you some headache.

Further References

  1. CSS List on W3Schools
  2. CSS list-style-position on W3Schools

Posted Tuesday, September 8th, 2009 · Back to Top

SPONSOR

Add Comment

21 Comments 21 Mentions

  1. Jeff Author Editor

    This is good advise, but most clients prefer the “outside” position so that the text will flow under the copy instead of the bullet. Making it necessary to use the “outside” position and using a positive margin on the “ul” to move the list inside container.

    ·

  2. Long Nguyen Author Editor

    Very cool. I didn’t know about this. Does it work on all major browsers?

    ·

    • Zach Dunn Author Editor

      @Long

      To the best of my knowledge, it should work with every browser.

      ·

  3. Tom Kenny Author Editor

    Great little tip and one that I shall be adding to my reset CSS for future projects.

    ·

  4. Erika Author Editor

    I agree with Jeff – one should remain mindful that using the “inside” position forces the bullet point itself to intrude on and serve as an indentation to the paragraph, if it is longer than one line.

    So if you try it and that appears in your paragraphs, you’ll know what it is. That’s the culprit. :)
    .-= Erika´s last blog ..Nepal Rugs and Carpets =-.

    ·

  5. Vicki Author Editor

    I’m with Erika and Jeff. This will negatively impact (IMO) the display of the list if the list items run to more than one line.

    ·

  6. chase Author Editor

    thank you very much! I have never used this css property before and i’m glad you pointed it out to me. Makes positioning these lists much easier!
    .-= chase´s last blog ..My Very First Microblog! Csagum.com =-.

    ·

  7. Cenk Author Editor

    Hey, you forgot to change the link to head back to the article on the demo ;) – It’s linking to some rainbow-article :D

    For the rest, Thanks a lot, pretty simple trick, but I didn’t knew ‘em yet.

    ·

    • Zach Dunn Author Editor

      @Cenk

      Oh my. So it is. Thanks for pointing it out, I just updated the link.

      ·

  8. Dennis Andersson Author Editor

    All these years and I always wondered why that happened… Now I know! :P

    ·

  9. Justin Dickinson Author Editor

    As others have said, this indents the text with the bullet so multi-lines will left align with the bullet and not the rest of the text.

    The other issue I’ve found is that places a block level element as the first child of an with list-style-position:inside knocks it down to a new line, off the bullet. I have not found a fix for this. Annoying if you have a list of, say, and

    ·

    • Lucinda Author Editor

      Your atlrice was excellent and erudite.

      ·

  10. Ralph Author Editor

    Cool… I didn’t know this! I always solved this problem with text-indent and margin. Thanks for the great tip :)

    ·

  11. Jad Graphics Author Editor

    Nice! I’ve been using this technique for quite some time now, but great tip for beginners!
    .-= Jad Graphics´s last blog ..15 Free PSD’s from Deviant Art that You Can Use for Your Next Project =-.

    ·

  12. Martin Author Editor

    Wicked example, never actually explored the property… Definitely amazing, the best use I guess would be for short list items, as mentioned in previous comments it doesn’t wrap nicely… Nevertheless, thank you!
    .-= Martin´s last blog ..customise the default size of avatars in WordPress 2.8+ =-.

    ·

  13. Phil Author Editor

    What im curious about is the following. When using list-style:inside is the following. When you get a long item and it starts on a new line, it hugs the left side of the div. Is there an easy and valid way to give the new text-line the same left margin as the line above?

    ·

  14. Han Author Editor

    Life is a comedy to him who thinks and a tragedy to him who feels.

    ·

  15. Roger Vivier Chaussures Author Editor

    Roger Vivier Chaussures

    ·

  16. data recovery from hard drive Author Editor

    Greetings I am so grateful I found your website, I really found you by mistake, while I was looking on Bing for something else, Anyhow I am here now and would just like to say thanks a lot for a incredible post and a all round interesting blog (I also love the theme/design), I don’t have time to look over it all at the moment but I have bookmarked it and also included your RSS feeds, so when I have time I will be back to read a lot more, Please do keep up the awesome job.

    ·

  17. Andy Author Editor

    Thanks!!!

    ·

  18. zkiwi Author Editor

    Thanks Zach! Nice Tip! :)

    ·

 

Build Internet by One Mighty Roar. Since 2008.