List margins and padding

Browsers don’t seem to be able to agree on how much padding and margin to place around lists by default, and also how margin and padding settings affect lists in general. This can be frustrating when developing websites that rely on lists and pixel-perfect element placement. By creating a list and using CSS to apply a background color to the list
and a different color to list items, and then removing the page’s padding and margins, you can observe how each browser creates lists and indents the bullet points and content. In Gecko browsers (e.g., Mozilla Firefox), Opera, and Safari, the list background color is displayed behind the bullet points, which suggests that those browsers place bullet points within the list’s left-hand padding (because backgrounds extend into an element’s padding). Internet Explorer shows no background color there, suggesting it places bullet points within the list’s left-hand margin. This is confirmed if you set the margin property to 0 for a ul selector in CSS. The list is unaffected in all browsers but Internet Explorer, in which the bullets abut the left edge of the web browser window. Conversely, setting padding to 0 makes the same thing happen in Gecko browsers, Safari, and Opera. To get all browsers on a level playing field, you must remove margins and padding, which, as mentioned previously in this book, is done in CSS by way of the universal selector:

* {
margin: 0;
padding: 0;
}

With this in place, all browsers render lists in the same way, and you can set specific values as appropriate. For example, bring back the bullet points (which may be at least partially hidden if margins and padding are both zeroed) by setting either the margin-left or padding-left value to 1.5em (i.e., set margin: 0 0 0 1.5em or padding: 0 0 0 1.5em).
The difference is that if you set padding-left, any background applied to the list will appear behind the bullet points, but if you set margin-left, it won’t. Note that 1.5em is a big enough value to enable the bullet points to display (in fact, lower values are usually sufficient, too—although take care not to set values too low, or the bullets will be clipped); setting a higher value places more space to the left of the bullet points.

Inline lists for navigation

Although most people think of lists as being vertically aligned, you can also display list items inline. This is particularly useful when creating navigation bars, as you’ll see. To set a list to display inline, you simply add display: inline; to the li
selector. Adding list-style-type: none; to the ul selector ensures that the list sits snug to the left of its container (omitting this tends to indent the list items). Adding a margin-right value to li also ensures that the list items don’t sit right next to each other. Here’s an example:
ul {
list-style-type: none;
}
li {
display: inline;
margin-right: 10px;
}

Related posts:

1. Content margins and padding in CSS Page margins and padding are easy to define using CSS....
2. Working with lists,Unordered lists,Ordered lists,Definition lists & Nesting lists This post concludes with the last of the major type...
3. Working with CSS shorthand for boxes This is something that is useful to get to grips...
4. Using Property Values Property values come in the following forms: constant text, constant...

Related posts brought to you by Yet Another Related Posts Plugin.