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?


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;
}

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.


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


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.


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.


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>

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.


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.


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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.