listas - numeracion en html

¿Cómo reduzco el espacio vertical entre los elementos de la lista en una lista desordenada?

Question

Tengo una muy simple lista desordenada html:

<ul>
<li>First</li>
<li>Second</li>
</ul>

El problema es que el estilo predeterminado para una lista de este tipo en Firefox deja mucho espacio entre cada elemento de la lista, casi igual que entre párrafos en una etiqueta <p> . Mi google-fu está demostrando ser inusualmente inútil en la actualidad. ¿Cómo reduzco ese espacio vertical? Supongo que hay un elemento css que puedo aplicar a la etiqueta <ul> , pero parece que no puedo encontrar nada.

(Esto va en el elemento de navegación lateral de una página, por lo que debe ser lo más compacto posible).

Answer 1

Además de todas las otras respuestas, podría valer la pena establecer line-height: 1em; Para reducir el espacio inicial de cada línea. Por supuesto, la padding-top padding-bottom margin-top margin-bottom son todos los culpables más probables.

Answer 2

El margen de propiedades y el relleno son el enfoque correcto.

Quiero agregar el consejo para restablecer su css completo con un archivo de css de reinicio predefinido, como este de Eric Meyer: Link

Después de esto tienes la opción de controlar tus estilos más específicos.

Answer 3

Establezca el margin y el padding propiedades CSS en los tamaños que desee. Para una máxima compacidad, use:

ul, li { margin: 0; padding: 0; }

Answer 4

Experimenté este problema

Firebug . Al hacer clic en los elementos del árbol HTML en Firebug, se resaltará el elemento en la propia página. Colorea el contenido, el margen y el relleno> por separado para que pueda ver exactamente cómo los márgenes y los rellenos afectan su diseño.

Firebug no mostró acolchado ni margen.

Cuando cambié la propiedad de visualización, la brecha desapareció.

li {
display: inline-block;
}

Producido un vacío, sin embargo:

li {
display: block;
}

No.

Answer 5

Ninguno de esos trabajó para mí.

Tenía una lista sin clasificar con una altura y anchura fijas que tenía que ser exactamente la suma de los elementos de la lista con sus rellenos y / o márgenes. En realidad 9 elementos de la lista que debían colocarse en un cuadrado de 3 x 3.

Lo que funcionó para mí es ponerlo.

li{
height: 144px;
width: 144px;
float: left;
}

Answer 6

Reduzca el top-margin bottom-margin y el relleno del elemento <li> como tal:

li { margin: 1em 3em; padding: 0.2em; }

Answer 7

Reduzca o elimine los márgenes superiores e inferiores y los rellenos. P.ej:

li {
margin: 0;
padding: 0.2em;
}

PD: Ya que estás usando Firefox, prueba Firebug . Al hacer clic en los elementos del árbol HTML en Firebug, se resaltará el elemento en la propia página. Colorea el contenido, el margen y el relleno por separado para que pueda ver exactamente cómo los márgenes y los rellenos afectan su diseño.

Answer 8

ul {
font-size: 0;
}
ul li {
display: inline;
font-size: 16px;
}

Siempre funciona