Paddings and margins on <ul> and <ol> elements in HTML are fairly inconsistent across browsers, even when they are both explicitly set. This post looks at how to try to align these bullets points against a margin as consistently as possible across browsers.
Set both padding and margins
By default all non-Internet Explorer browsers have a 0px left margin for <ul> and <ol> elements. IE8 also has a 0px margin when a DOCTYPE is specified. So in order to be as consistent as possible across browsers be sure to set the left margin to 0px.
What I am trying to achieve
The end result is to get the bullets flush with the rest of the content without them being indented. The following <ul> attempts to do this and is within about 5px across browsers.
- This is item 1
- This is item 2
And here it is for a <ol>
- This is item 1
- This is item 2
Note that neither of these will be perfectly flush against the same margin as the rest of the content depending on which browser you are viewing this page in. If the padding is set to low then for some browsers the bullet will disappear off to the left, so it’s best to allow enough for it to be seen in all browsers; this means for some it will still be indented slightly.
Padding for <ul>
I’ve found the ideal amount of padding to make this work across browsers is between 18px and 20px depending on your asthetics. Any less and in the webkit based browsers the bullet will partly disappear.
ul {
margin-left: 0;
padding-left: 20px;
}
The webkit based browser issue is due to the amount of space between the bullet and the <li> text, which is greater than in other browsers. I haven’t seen a way to reduce this space (although you can increase it by setting the padding and margin of the <li>).
Padding for <ol>
The padding needs to be more for <ol>, around 26px if there will only be single digit bullets and around 32px if there will be 2 digit bullets.
ol {
margin-left: 0;
padding-left: 26px;
}
Because the amount of padding required varies depending on the number of bullets for numbered lists it pays to allow for a greater amount of padding which makes this “solution” not quite so good for ordered lists as it is for unordered lists.