Espaço entre as li's

[luqfreitas 0]

Fala galera, eu gostaria de saber se há como eu botar um espaço entre uma li e outra do tipo

 

 

 

<li>UM</li>

<li>DOIS</li>

<li>TRÊS</li>

<li>QUATRO</li>

<li>CINCO</li>

<li>SEIS</li>

 

entrei as lis TRÊS e QUATRO eu gostaria de dar um espaço maior do que as demais, tem como?

Me ajude por favor

grato

 

[EduardoAugustoPHP 27]

Tem alguns métodos de se fazer isso...

 

o mais simples é criar uma classe no CSS com um espaçamento maior e vc aplica somente nos li' que vc deseja esse espaço maior.

 

Take a look:

 

.espacoNormal {
       margin:10px 0;
}

.espacoMaior{
      margin: 15px 0;
}

<li class="espacoNormal">UM</li>
<li class="espacoNormal">DOIS</li>
<li class="espacoMaior">TRES</li>
<li class="espacoMaior">QUATRO</li>
<li class="espacoNormal">CINCO</li>

 

Vlw!

[luqfreitas 0]

Não deu certo, já tem uma class na li será que tá dando erro por isso? to fazendo em html 5!

[bruno_mosciatti 22]

Não deu certo, já tem uma class na li será que tá dando erro por isso? to fazendo em html 5!

A solução do Eduardo é a melhor! Se sua li já tem uma classe, coloca outra! Qual o problema?

[EduardoAugustoPHP 27]

Posta o CSS da sua LI por favor.

[angelorubin 142]

Boa tarde,

 

Creio que pseudo elemento resolva seu problema.

 

XHTML

<ul id="menu">
    <li>UM</li>
    <li>DOIS</li>
    <li>TRÊS</li>
    <li>QUATRO</li>
    <li>CINCO</li>
    <li>SEIS</li>
</ul>

 

CSS

#menu li:nth-child(3),li:nth-child(4) {
	margin:10px 10px 10px 0;
	border:1px solid #F00;
	padding:5px;
}

 

* Funciona somente no IE9 e IE10.

 

Espero que ajude.

[angelorubin 142]

Bom dia,

 

Tem uma maneira alternativa (gambiarra .. rsrs) para funcionar nos IE's 7/8.

/* For IE's 7/8 */
#menu > li:first-child + li + li, #menu > li:first-child + li + li + li {
  margin:10px 10px 10px 0;
  border:1px solid #F00;
  padding:5px;
}

http://angelorubin.besaba.com/PseudoSeletorCss3/child.php

 

Se quiser testar aqui - http://netrenderer.com/index.php