Columnas CSS en UL vs DIV

¿Por qué es la salida para

  • Item
  • Item
  • Item
  • Item

diferente de

 
  • Item
  • Item
  • Item
  • Item

con este CSS?

 .tcol { -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; column-count: 3; column-gap: 20px; } 

No entiendo por qué se representa una línea vacía.

¿Cómo puedo eliminar la línea vacía de la primera lista o obtener los puntos en la segunda lista?

Demostración en vivo está aquí .

Los elementos tienen estilos predeterminados, los navegadores aplican esos estilos predeterminados si no los define específicamente.

Es una buena práctica usar un restablecimiento de CSS en sus proyectos y luego definir los estilos de la forma en que los necesita.

Aquí hay una buena fuente para empezar:
http://meyerweb.com/eric/tools/css/reset/

Por ejemplo, en su caso, FireFox presenta un 16px superior e inferior de 16px para el elemento UL (modelo de caja predeterminado).

Añadir margin:0 a ul

 .tcol { -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; column-count: 3; column-gap: 20px; } ul{ margin:0 } 

MANIFESTACIÓN

Debido a que el navegador dividió el

  • en columnas, el list-style-type se ha eliminado de la vista normal. Puede corregir esto agregando list-style-position: inside; propiedad a su clase tcol .

    También hay una diferencia muy visible entre los dos diseños, sin contar el tipo de estilo de lista que falta. Al usar el panel Elementos en Chrome y al desplazar cada

      y

    • , puede ver cómo el navegador presenta el contenido de la columna.

      La segunda versión de su marca parece ser más “correcta”, con el contenedor que abarca correctamente los elementos de la lista.