Question

<div style="height: 0px; line-height: 0px; " class="bumper">&nbsp;</div>

Donde la clase bumper tiene el siguiente estilo CSS:

.bumper{
   font-size:1px;
   line-height:1px;
 }

Lo he visto en varias webs y no se para qué se utiliza. Gracias y un saludo a todos.

Answer 1

es solo un divisor.. se utiliza para marcar un punto de ruptura y solo es como referencia..

Imagina que tienes una seccion de 2 columnas y quieres pasar a 3, bueno pues pones esa solo para darte cuenta donde cambias la maquetación.

ese font-size y line height puede que sirva como hack para corregir estilos en ciertos navegadores, no he encontrado más información al respecto. Por lo menos no oficial.

Actualizacion:

El line heigh es la altura que hay entre 2 lineas de texto

texto1texto1texto1texto1texto1texto1texto1texto1texto1texto1texto1texto1		<-- esta es la line height

texto2texto2texto2texto2texto2texto2texto2texto2texto2texto2texto2

la font size a 1px, es illegible pues una fuente de 1 pixel es practicamente un punto.. esto lo han de hacer ya que el tamñao por defecto en el internet explorer es de 9px si es que no lo especificas.. nada de que espantarse.

Answer 2

Hola Javier,

el código que pones genera un cuadrado de un píxel que no se ve.

Habría que ver el contexto en el que se usa para darle sentido a un cuadrado tan pequeño e invisible. Las veces que vi usos así se usaban como relleno entre elmentos que opr ejemplo tenían una cantidad de píxeles impar y que debían mostrarse alineados: con uno de estos pixeles aquí y allá se hacía encajar todo.

A este ajuste fino lo vas a ver por ahí como "pixel perfect".