He visto esto un par de veces últimamente en Twitter y luego un interesante Dabblet, así que pensé que sería importante documentarlo.
Aquí está el trato: una serie de inline-block los elementos formateados como normalmente formatea HTML tendrán espacios entre ellos.
En otras palabras:
<nav>
<a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/#">One</a>
<a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/#">Two</a>
<a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/#">Three</a>
</nav>nav a {
display: inline-block;
padding: 5px;
background: red;
}Resultará en:
A menudo muy indeseable
A menudo queremos que los elementos se enfrenten entre sí. En el caso de la navegación, eso significa que evita los incómodos huecos en los que no se puede hacer clic.
Esto no es un “error” (no lo creo). Es simplemente la forma en que funciona la configuración de elementos en una línea. Quieres que los espacios entre las palabras que escribes sean espacios, ¿verdad? Los espacios entre estos bloques son como espacios entre palabras. Eso no quiere decir que la especificación no pueda actualizarse para decir que los espacios entre los elementos del bloque en línea no deberían ser nada, pero estoy bastante seguro de que es una enorme lata de gusanos que es poco probable que suceda alguna vez.
Aquí hay algunas formas de combatir la brecha y hacer que los elementos de bloques en línea se coloquen directamente uno al lado del otro.
Quita los espacios
La razón por la que obtienes los espacios es porque, bueno, tienes espacios entre los elementos (un salto de línea y algunas pestañas cuentan como un espacio, solo para que quede claro). El HTML minimizado resolverá este problema o uno de estos trucos:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>o
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>o con comentarios …
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>Todos son bastante originales, pero funciona.
Margen negativo
Puede colocar los elementos en su lugar con un margen negativo de 4 píxeles (es posible que deba ajustarse según el tamaño de fuente del padre). Aparentemente, esto es problemático en IE anteriores (6 y 7), pero si no le importan esos navegadores, al menos puede mantener limpio el formato del código.
nav a {
display: inline-block;
margin-right: -4px;
}Omitir la etiqueta de cierre
De todos modos, a HTML5 no le importa. Aunque debes admitir, se siente extraño.
<ul>
<li>one
<li>two
<li>three
</ul>Establecer el tamaño de fuente en cero
Un espacio que tiene cero font-size es … ancho cero.
nav {
font-size: 0;
}
nav a {
font-size: 16px;
}Matt Stow informa que el tamaño de fuente: 0; La técnica tiene algunos problemas en Android. Cita: Pre-Jellybean no elimina el espacio en absoluto, y Jellybean tiene un error por el cual el último elemento al azar tiene un poquito de espacio. Ver investigación. También tenga en cuenta que si está ajustando el tamaño de las fuentes en ems, esta cuestión de tamaño de fuente cero puede ser un problema, ya que la cascada de ems los niños también tendrían un tamaño de fuente cero. Rems sería de ayuda aquí, de lo contrario cualquier otro que no sea en cascada font-size para volver a subirlo. ¡Otra rareza! Doug Stewart me mostró que si usa @ font-face con esta técnica, las fuentes perderán el suavizado en Safari 5.0.x. (caso de prueba) (captura de pantalla).
Solo hazlos flotar en su lugar
Tal vez no necesiten estar en bloque en línea en absoluto, tal vez solo puedan flotar de una forma u otra. Eso le permite establecer su ancho y alto y el acolchado y esas cosas. No puedes centrarlos como puedes hacerlo text-align: center; el padre de inline-block elementos. Bueno … puedes, pero es extraño.
Solo usa flexbox en su lugar
Si el soporte del navegador es aceptable para usted y lo que necesita fuera del bloque en línea es centrar, puede usar flexbox. No son exactamente modelos de diseño intercambiables ni nada, pero es posible que obtenga lo que necesita.
Ver
Ejemplo en CodePen: