width - content - Pantalla: bloque en línea: ¿qué es ese espacio?

max width css responsive

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo elimino el espacio entre los elementos de bloque en línea? 34 respuestas

Los bloques en línea tienen este extraño espacio entre ellos. Podría vivir con eso, hasta un punto en el que, si cargo más contenido con una llamada AJAX, el pequeño espacio desaparece. Sé que me estoy perdiendo algo aquí.

div {
    width: 100px;
    height: auto;
    border: 1px solid red;
    outline: 1px solid blue;
    margin: 0;
    padding: 0; 
    display: inline-block;
}

http://jsfiddle.net/AWMMT/

¿Cómo hacer que el espaciado sea consistente en los bloques en línea?

Answer 1

De hecho, hay una manera muy simple de eliminar espacios en blanco del bloque en línea que es tanto fácil como semántico. Se llama fuente personalizada con espacios de ancho cero, lo que le permite colapsar el espacio en blanco (agregado por el navegador para los elementos en línea cuando están en líneas separadas) en el nivel de fuente usando una fuente muy pequeña. Una vez que declaras la fuente, simplemente cambias la familia de fuentes en el contenedor y de nuevo en los hijos, y listo. Me gusta esto:

@font-face{ 
    font-family: ''NoSpace'';
    src: url(''../Fonts/zerowidthspaces.eot'');
    src: url(''../Fonts/zerowidthspaces.eot?#iefix'') format(''embedded-opentype''),
         url(''../Fonts/zerowidthspaces.woff'') format(''woff''),
         url(''../Fonts/zerowidthspaces.ttf'') format(''truetype''),
         url(''../Fonts/zerowidthspaces.svg#NoSpace'') format(''svg'');
}

body {
    font-face: ''OpenSans'', sans-serif;
}

.inline-container {
    font-face: ''NoSpace'';
}

.inline-container > * {
    display: inline-block;
    font-face: ''OpenSans'', sans-serif;
}

Juego a gusto. Aquí hay una descarga para la fuente que acabo de preparar en font-forge y convertida con FontSquirrel webfont generator. Me llevó todos los 5 minutos. La declaración css @ font-face está incluida: fuente de espacio comprimido de ancho cero . Está en Google Drive, por lo que deberá hacer clic en Archivo> Descargar para guardarlo en su computadora. Probablemente también necesite cambiar las rutas de las fuentes si copia la declaración en su archivo css principal.

Answer 2

El espacio está en el HTML. Hay varias soluciones posibles. De mejor a peor:

1. Elimine el espacio real en el HTML (idealmente su servidor podría hacer esto por usted cuando se sirva el archivo, o al menos su plantilla de entrada podría espaciarse apropiadamente) http://jsfiddle.net/AWMMT/2/
2. Use float: left lugar de display: inline-block , pero esto tiene efectos indeseables en la altura: http://jsfiddle.net/AWMMT/3/
3. Establezca el font-size de font-size del contenedor en 0 y establezca un font-size de font-size apropiado para los elementos internos: http://jsfiddle.net/AWMMT/4/ - esto es bastante simple, pero luego no puede aprovechar la fuente relativa reglas de tamaño en los elementos internos (porcentajes, em)

Answer 3

Puedes comentar el espacio en blanco.

Respuesta original de 2013

Me gusta:

<span>Text</span><!--

--><span>Text 2</span>

Edición 2016:

También me gusta el siguiente método, donde simplemente colocas el corchete de cierre justo antes del siguiente elemento.

<span>Text</span

><span>Text 2</span>

Answer 4

También puedes hacerlo así (que en mi humilde opinión, creo que es sintaticamente correcto)

<div class="div1">...</div>
<div class="div1">...</div>
.
.

.div1{
    display:inline-block;
}
.div1::before, div1::after { white-space-collapse:collapse; }

Answer 5

http://jsfiddle.net/AWMMT/1/

<div>...</div><div>...</div>
              ^
              |--- no whitespace/new line here.

Sus espacios fueron las nuevas líneas que el navegador convirtió en "espacios" al mostrarlo.

O podrías intentar hackear un poco con CSS:

http://jsfiddle.net/AWMMT/6/

body { white-space: -0.125em; }
body > * { white-space: 0; /* reset to default */ }