Cómo eliminar el margen invisible creado por un salto de línea en el código fuente en el bloque en línea <a> elemento

Question

Tengo un elemento <a> como bloque en línea con un ancho fijo. Me gustaría mostrar las cajas <a> una al lado de la otra, dos cajas por fila (exactamente como en el first example). PERO si cada elemento del cuadro está en una nueva línea en el código fuente (second example), las casillas obtienen un margen invisible, que puede ver si echa un vistazo al ejemplo con p. Ej. las herramientas de desarrollo de Chrome. El ancho y el relleno del envoltorio principal y el margen de cada recuadro se calculan exactamente, de modo que el margen invisible agregado empuje el segundo recuadro hacia abajo en la siguiente fila.

Podría simplemente usar el código del primer ejemplo (todos los elementos sin saltos de línea directamente uno detrás del otro), pero me gustaría saber cómo puedo eliminar este margen invisible para que los dos cuadros encajen de nuevo al lado de cada uno otro en el div wrapper (como en el primer ejemplo), incluso si cada elemento <a> está en una nueva línea en el código fuente.

Ejemplos:

1.) Sin salto de línea en el código (el diseño que quiero tener): http://jsfiddle.net/mLa93/2/

2.) Con salto de línea en el código (línea agregada rompe después <a> elemento de cambios de diseño) : http://jsfiddle.net/mLa93/3/

Answer 1

Como fcalderan sugirió white-space:nowrap en el padre debería funcionar. Ver http://jsfiddle.net/kkpKg/ para un ejemplo. Si no es así, entonces debes estar haciendo algo diferente o incorrecto.

Ok, ahora lo entiendo :-)

La mejor solución es a dejar de lado los saltos de línea, sin embargo, si usted no quiere eso, la siguiente mejor sería hacer comentarios a cabo:

<div id="wrap"> 
     <a href="#">box 1</a><!-- 
    --><a href="#">box 2</a><!-- 
    --><a href="#">box 3</a> 
    </div> 

Si eso no es una posibilidad que lo único que se me ocurre (y es soportado por los navegadores actuales) es establecer el line-heightfont-size en #wrap a cero y vuelve a su tamaño original en los enlaces :

#wrap { 
    font-size: 0; 
} 
#wrap a { 
    font-size: 14px; 
} 

Answer 2

tratar de utilizar white-space:nowrap el elemento padre (el envase de sus enlaces) y probablemente white-space: normal en enlaces

Answer 3

¡No me di cuenta que esta pregunta era de hace un año!
Dado que ha pasado tanto tiempo tratando de resolver esto, hice algunas investigaciones y encontré una pregunta similar. He ajustado el código aquí
solution
y debería funcionar now.I coloca a 5 cuadras por el caso de flotador que usted ha mencionado antes

EDIT: el problema era sus márgenes. Tienes un relleno de 10px y márgenes de 10px. Si hubiera hecho su div 230px (3x10px + 2x100px), habría obtenido el mismo efecto que el primer violín.

Answer 4

Chris Coyier publicado un buen artículo sobre este problema:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/