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.
ul, ol {list-style-position:inside;}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:
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
- CSS List on W3Schools
- CSS list-style-position on W3Schools
Discussion
September 8th, 2009 at 1:01 PM
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.
September 8th, 2009 at 2:11 PM
Very cool. I didn’t know about this. Does it work on all major browsers?
September 8th, 2009 at 3:39 PM
@Long
To the best of my knowledge, it should work with every browser.
September 9th, 2009 at 4:16 AM
Great little tip and one that I shall be adding to my reset CSS for future projects.
September 9th, 2009 at 11:26 AM
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 =-.
September 9th, 2009 at 12:09 PM
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.
September 10th, 2009 at 11:16 AM
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 =-.
September 11th, 2009 at 8:56 AM
Hey, you forgot to change the link to head back to the article on the demo
– It’s linking to some rainbow-article 
For the rest, Thanks a lot, pretty simple trick, but I didn’t knew ‘em yet.
September 11th, 2009 at 9:02 AM
@Cenk
Oh my. So it is. Thanks for pointing it out, I just updated the link.
September 13th, 2009 at 11:07 AM
All these years and I always wondered why that happened… Now I know!
September 15th, 2009 at 10:10 AM
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
September 19th, 2009 at 3:33 PM
Cool… I didn’t know this! I always solved this problem with text-indent and margin. Thanks for the great tip
October 6th, 2009 at 4:00 AM
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 =-.
October 19th, 2009 at 6:29 PM
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+ =-.
March 3rd, 2010 at 6:17 AM
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?
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.