Como eu defino o espaço vertical entre os itens da lista?

115

Dentro de um <ul>elemento, claramente o espaçamento vertical entre as linhas pode ser formatado com o atributo line-height.

Minha pergunta é, dentro de um <ul>elemento, como faço para definir o espaçamento vertical entre os itens da lista?

html css html-lists Brice Coustillas
fonte
1
ul li { margin: ???; padding: ???; line-height: ???; }todos ou alguns desses atributos CSS.
Brad Christie,

Respostas:

112

Você pode usar margem. Veja o exemplo:

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}

fonte
especificamente, use margem nos lielementos, não no ulelemento.
Duanev
41

HTML

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

CSS

li:not(:last-child) {
    margin-bottom: 5px;
}

EDITAR: Se você não usar o caso especial para o último elemento li, sua lista terá um pequeno espaçamento depois que você pode ver aqui: http://jsfiddle.net/wQYw7/

Agora compare isso com a minha solução: http://jsfiddle.net/wQYw7/1/

Claro que isso não funciona em navegadores mais antigos, mas você pode usar facilmente extensões js que habilitarão isso para navegadores mais antigos.


fonte
1
@Layne parte de nosso trabalho como desenvolvedores / codificadores da web é fornecer soluções que funcionem em tantos ambientes quanto possível. Sua resposta é realmente um exagero para a pergunta feita.
disinfor
1
Acho que não. Você só fornece uma solução para o ambiente que deseja atingir; todo o resto seria um exagero, a menos que você planeje expandir. Além disso, todas as respostas têm a desvantagem de adicionar espaço antes e / ou depois do primeiro / último elemento da lista. O que não era a questão, ele queria apenas um espaçamento ENTRE os elementos da lista (pelo menos ele o escreveu). O último elemento nas outras respostas terá um espaçamento posteriormente, embora não haja elementos li a seguir.
O ambiente com o qual ele está trabalhando são navegadores da web. Não é exagero sugerir uma solução que funcione em qualquer lugar. Além disso, se você realmente estiver preocupado com a margem do último item, não sugerirá uma solução que precise de js para corrigir. Você poderia usar :first-childe funcionaria em tudo IE7 +
disinfor
4
@disinfor Eu discordo sobre direcionar tudo. Parte do estresse do desenvolvimento web vem do suporte a navegadores que não nos oferecem suporte. Safari é um deles. Precisamos enfrentar os navegadores que impedem a Internet, medium.com/@richtr/… . Nossas páginas da web devem trazer de volta os avisos "Não oferecemos suporte ao seu navegador", e não passar pelo inferno para que funcione em qualquer lugar. E precisamos informar e enfrentar os clientes também. Ou não podemos fazer nada e ser tapetes incríveis.
1,21 gigawatts
@ 1.21gigawatts "Nossas páginas da web devem trazer de volta a mensagem" Não oferecemos suporte ao seu navegador "" mhm, não. Isso é chamado de sabotagem da concorrência e é ilegal em vários países. A Microsoft fez isso com o Skype for Web. O Skype for Web ainda funciona perfeitamente em outros navegadores. O Google fez o Youtube funcionar mal no Safari por mais de um ano. O Google impede que os usuários do Tor usem certos serviços. O objetivo da "plataforma web" não é tornar aplicativos e serviços independentes de plataforma, como em não bloquear plataformas específicas? Se você quer fazer isso, por que não criar programas nativos? No final, eles são mais poderosos.
Andreas
35

Eu estaria inclinado a isso, que tem a virtude do suporte do IE8.

li{
    margin-top: 10px;
    border:1px solid grey;
}

li:first-child {
    margin-top:0;
}

JSFiddle

Paulie_D
fonte
27

Adicione um marginàs suas litags. Isso criará um espaço entre lie você pode usar line-heightpara definir o espaçamento do texto dentro das litags.

desinfor
fonte
3

Muitas vezes, ao produzir emails em HTML, você não pode usar folhas de estilo ou blocos de estilo / estilo. Todo CSS precisa estar embutido. No caso de você querer ajustar o espaçamento entre os marcadores, eu uso li style = "margin-bottom: 8px;" em cada item do marcador. Personalize o valor dos pixels ao seu gosto.

Malcolm Stone
fonte
Além disso, as tags de estilo / tipo de estilo estão obsoletas
Ben Slade
2

Para aplicar a uma lista inteira, use

ul.space_list li { margin-bottom: 1em; }

Então, no html:

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>
Tom Bartenstein
fonte
0

definir padding-bottom para cada lista usando pseudo classe é um método viável. Também pode ser usada a altura da linha. Lembre-se de que as propriedades da fonte, como a família da fonte, a espessura da fonte, etc. desempenham um papel nas alturas desiguais.

Rishi Jung
fonte
2
Você pode fornecer um exemplo de sua solução?
Muldec
-9

<br>entre as <li></li>entradas de linha parece funcionar perfeitamente bem em todos os navegadores da web que experimentei, mas não passa no verificador W3C CSS3 on-line. Dá-me precisamente o espaçamento de linha que procuro. No que me diz respeito, visto que sem dúvida funciona, estou persistindo em usá-lo, independentemente do que o W3C diga, até que alguém possa encontrar uma boa alternativa legal.

Melvyn Owen
fonte
Sua sugestão funciona bem se você estiver satisfeito com a altura da linha atual, mas acho que ele deseja especificar sua própria quantidade de espaço. Usando quebras de linha, apenas crie novas linhas usando a altura da linha atual.
1,21 gigawatts
Se você iterar em uma lista com muitos itens, adicionar br é uma prática terrível. A marcação é a maneira mais segura e segura de adicionar espaço, conforme sugerido pelas respostas acima.
SeaWarrior404