Un espacio entre los elementos de la lista de bloques en línea [duplicado]
Posible duplicado:
margen no deseado en elementos de la lista de bloques en línea
Cómo eliminar el "espacio invisible" de HTML
¿ Por qué los inline-blockelementos de la lista tienen un espacio? No importa cómo convierta los elementos de mi lista en un menú, siempre obtengo espacios.
li {
border: 1px solid black;
display: inline-block;
height: 25px;
list-style-type: none;
text-align: center;
width: 50px;
}
ul {
padding: 0;
}<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
He visto esto y respondido antes:
Después de investigar más, descubrí que inline-blockes un método que depende de los espacios en blanco y de la configuración de fuente. En este caso se renderiza 4px.
Para evitar esto, puedes ejecutar todos los
limensajes de correo electrónico juntos en una línea, o bloquear las etiquetas finales y comenzar las etiquetas juntas de esta manera:
<ul>
<li>
<div>first</div>
</li><li>
<div>first</div>
</li><li>
<div>first</div>
</li><li>
<div>first</div>
</li>
</ul>
Ejemplo aquí .
Como se menciona en otras respuestas y comentarios, la mejor práctica para resolver esto es agregar font-size: 0;al elemento principal:
ul {
font-size: 0;
}
ul li {
font-size: 14px;
display: inline-block;
}
Esto es mejor para la legibilidad de HTML (evitando ejecutar las etiquetas juntas, etc.). El efecto de espaciado se debe a la configuración de espaciado de la fuente, por lo que debe restablecerlo para los elementos en línea y configurarlo nuevamente para el contenido interno.
Solución:
ul {
font-size: 0;
}
ul li {
font-size: 14px;
display: inline-block;
}
Debes establecer el tamaño de fuente principal en 0
Yo agregaría la propiedad CSS de float left como se ve a continuación. Eso elimina el espacio extra.
ul li {
float:left;
}
