Uno de los quebraderos de cabeza que se tiene a la hora de diseñar una web responsive, es trabajar con los bloques en la misma línea. Para ello, se suele utilizar la propiedad display: inline-block junto con la propiedad vertical-align: (top/middle/bottom…). El problema de usar inline-block, es que genera unos incómodos espacios entre los los elementos.
¿Como corregir esto? En CSS-trciks encontré las respuestas.
Hay cuatro maneras de solucinarlo:
Quitar los espacios en el código
Los espacios aparecen porque en el código tienes o bien un espacio o salto de línea en el código, algo que es lógico cuando quieres tener un código limpio. Comprimir el código o alguna de estas opciones solucionaría el problema:
Cerrando y abriendo la etiqueta en la misma línea y continuar en la siguiente:
<ul> <li> uno</li><li> dos</li><li> tres</li> </ul>
Lo contrario que en el caso anterior. Cerrar la etiqueta en la siguiente línea:
<ul> <li>uno</li ><li>dos</li ><li>tres</li> </ul>
O usando comentarios. Esta me parece la más engorrosa de las tres.
<ul> <li>uno</li><!-- --><li>dos</li><!-- --><li>tres</li> </ul>
Si te gusta tener el código bien tabulado y limpio, no son muy buenas opciones.
Aplicar margen negativo
Aplicando un margen negativo a la izquierda o derecha de todos los elementos, se solucionaría el problema. Este sistema puede que no funcione bien IE 6 y7, pero esto a estas alturas no debería preocupar en absoluto. Deberías estar desarrollando como mínimo y, cada vez menos, para IE8.
ul li { display: inline-block; margin-right: -4px; }
No cerrar las etiquitas
En html5 funcionará correctamente, pero volvemos a lo de siempre, no es código limpio y no sigue el estándar.
<ul> <li>uno <li>dos <li>tres </ul>
Poniendo font-size de la capa contenedora a cero
<ul> <li>uno</li> <li>dos</li> <li>tres</li> </ul>
ul { font-size: 0; padding: 0px; } ul li { display: inline-block; vertical-align: middle; background-color: red; font-size: 14px; padding: 5px 10px; }
Esta es una de las mejores opciones por su comodidad, pero tiene algunos inconvenientes:
- En Android, en concreto en la Jelly Bean, no funciona. Una de las soluciones que aportan, es poner la fuente a un tamaño muy pequeño (0.001px:) en vez de a 0px.
- Otra inconveniente que puede generar es que «resetea» el tamaño de fuente a 0px, por lo que si trabajas en em. Tienes dos opciones, una es usar rem o bien volver a definir el tamaño de fuente.
- Por último, IOS. Si utilizas @font-face puede que las fuentes pierdan suavidad y se vean algo pixeladas.
Usar FlexBox o cajas flexibles
ul.flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
Aquí puedes ver todos los ejemplos.
Comentarios recientes