No control over the size and shape of the bullet.Requires an extra unsemantic element (this will probably lose you more friends on SO than it will in real life ) but it's annoying for those who like their code to be as lean and efficient as possible, and it violates the separation of presentation and content that HTML / CSS is supposed to offer).If the user increases their text size, the bullet should scale in proportion (providing you set the padding & margin in ems not px).

The bullet can be a different colour to the text.Someone else may have a workaround for this, though.) You get more control over the position of the bullet than with option (2) – you can move it closer to the text (although despite my best efforts it seems you can't alter the vertical position by adding padding-top to the.No control over vertical positioning of the bullet.Limited to shapes and sizes of CSS's built-in bullet types.Can't move the bullet any closer to the text than the browser default.If the user increases the text size, the spacing and bullet size should scale proportionally.By adjusting the padding on the, you can add as much extra horizontal space between the bullet and the text as you like.If you're developing a 'responsive' layout using only percentages for widths, it could be difficult to get the bullet exactly where you want it over a range of screen widths.It'll also likely get further out of position as the text size increases If a user increases the text size on their browser, the bullet will stay at the original size.Adds an extra (albeit small) image file to your page, increasing the page weight.You can use CSS background-position to position the image pretty much anywhere you want in relation to the text, using pixels, ems or %.You can use any image you want for the bullet.To summarise the other answers here – if you want finer control over the space between bullets and the text in a list item, your options are:

Add space between bullets word 2013