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.
No comments:
Post a Comment