html - sirve - ¿Cómo configuro el espacio vertical entre los elementos de la lista?

span html para que sirve

Question

Dentro de un elemento <ul> , claramente el espacio vertical entre líneas se puede formatear con el atributo de altura de línea.

Mi pregunta es, dentro de un elemento <ul> , ¿cómo establezco el espaciado vertical entre los elementos de la lista?

Answer 1

Añade un margin a tus etiquetas li . Eso creará espacio entre la li y puede usar line-height para establecer el espaciado en el texto dentro de las etiquetas li .

Answer 2

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: Si no usa el estuche especial para el último elemento li, su lista tendrá un pequeño espacio después, que puede ver aquí: http://jsfiddle.net/wQYw7/

Ahora compare eso con mi solución: http://jsfiddle.net/wQYw7/1/

Claro que esto no funciona en los navegadores más antiguos, pero puede usar fácilmente las extensiones js que lo habilitarán para los navegadores más antiguos.

Answer 3

Me inclinaría por esto, que tiene la virtud del soporte de IE8.

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

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

JSFiddle

Answer 4

Puedes usar el margen. Vea el ejemplo:

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}

Answer 5

<br> entradas de línea entre <li></li> parecen funcionar perfectamente bien en todos los navegadores web que he probado, pero no pasa el verificador en línea W3C CSS3. Me da precisamente el interlineado que busco. En lo que a mí respecta, ya que sin duda funciona, persisto en usarlo, diga lo que diga el W3C, hasta que alguien pueda encontrar una buena alternativa legal.