Para resumir as outras respostas aqui - se você deseja um controle mais refinado do espaço entre os marcadores e o texto em um <li>
item da lista, suas opções são:
(1) Use uma imagem de plano de fundo:
<style type="text/css">
li {
list-style-type:none;
background-image:url(bullet.png);
}
</style>
<ul>
<li>Some text</li>
</ul>
Vantagens:
- Você pode usar qualquer imagem que desejar para o marcador
- Você pode usar CSS
background-position
para posicionar a imagem praticamente em qualquer lugar que desejar em relação ao texto, usando pixels, ems ou%
Desvantagens:
- Adiciona um arquivo de imagem extra (embora pequeno) à sua página, aumentando o peso da página
- Se um usuário aumentar o tamanho do texto no navegador, o marcador permanecerá no tamanho original. Também ficará mais fora de posição à medida que o tamanho do texto aumenta
- Se você estiver desenvolvendo um layout 'responsivo' usando apenas porcentagens para larguras, pode ser difícil colocar o marcador exatamente onde você deseja em um intervalo de larguras de tela
2. Use preenchimento na <li>
etiqueta
<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>
<ul>
<li>Some text</li>
</ul>
Vantagens:
- Sem imagem = menos 1 arquivo para download
- Ao ajustar o preenchimento no
<li>
, você pode adicionar o espaço horizontal extra entre o marcador e o texto que desejar
- Se o usuário aumentar o tamanho do texto, o espaçamento e o tamanho do marcador deverão ser reduzidos proporcionalmente
Desvantagens:
- Não é possível mover o marcador mais para perto do texto do que o padrão do navegador
- Limitado a formas e tamanhos dos tipos de marcadores internos do CSS
- O marcador deve ter a mesma cor do texto
- Sem controle sobre o posicionamento vertical da bala
(3) Coloque o texto em um <span>
elemento extra
<style type="text/css">
li {
padding-left:1em;
color:#f00; /* red bullet */
}
li span {
display:block;
margin-left:-0.5em;
color:#000; /* black text */
}
</style>
<ul>
<li><span>Some text</span></li>
</ul>
Vantagens:
- Sem imagem = menos 1 arquivo para download
- Você obtém mais controle sobre a posição do marcador do que com a opção (2) - você pode movê-lo para mais perto do texto (embora, apesar dos meus esforços, pareça que você não pode alterar a posição vertical adicionando
padding-top
ao<span>
. uma solução alternativa para isso, no entanto ...)
- O marcador pode ter uma cor diferente do texto
- Se o usuário aumentar o tamanho do texto, o marcador deverá ser dimensionado em proporção (desde que você defina o preenchimento e a margem em ems, não px)
Desvantagens:
- Requer um elemento extra-semântico (provavelmente perderá mais amigos no SO do que na vida real;), mas é irritante para quem gosta do código ser o mais enxuto e eficiente possível e viola a separação de apresentação e conteúdo que HTML / CSS deve oferecer)
- Sem controle sobre o tamanho e a forma da bala
Esperamos por alguns novos recursos no estilo de lista no CSS4, para que possamos criar marcadores mais inteligentes sem recorrer a imagens ou marcação exta :)