¿Cómo elimino el espacio entre los elementos inline / inline-block?


1068

Dado este HTML y CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

Como resultado, habrá un espacio de 4 píxeles de ancho entre los elementos SPAN.

Demostración: http://jsfiddle.net/dGHFV/

Entiendo por qué sucede esto, y también sé que podría deshacerme de ese espacio eliminando el espacio en blanco entre los elementos SPAN en el código fuente HTML, de esta manera:

<p>
    <span> Foo </span><span> Bar </span>
</p>

Sin embargo, esperaba una solución CSS que no requiera la manipulación del código fuente HTML.

Sé cómo resolver esto con JavaScript: eliminando los nodos de texto del elemento contenedor (el párrafo), así:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

Demostración: http://jsfiddle.net/dGHFV/1/

Pero, ¿se puede resolver este problema solo con CSS?


Consulte mi respuesta en esta pregunta para obtener un conjunto completo de opciones relevantes ahora: stackoverflow.com/questions/14630061/…
ktamlyn


Respuestas:


1006

Como esta respuesta se ha vuelto bastante popular, la estoy reescribiendo significativamente.

No olvidemos la pregunta real que se hizo:

¿Cómo eliminar el espacio entre elementos de bloque en línea ? Esperaba una solución CSS que no requiera la manipulación del código fuente HTML. ¿Se puede resolver este problema solo con CSS?

Que es posible resolver este problema con CSS solo, pero no hay completamente robustos correcciones de estilo CSS.

La solución que tuve en mi respuesta inicial fue agregar font-size: 0al elemento padre, y luego declarar un sentido font-sizesobre los hijos.

http://jsfiddle.net/thirtydot/dGHFV/1361/

Esto funciona en versiones recientes de todos los navegadores modernos. Funciona en IE8. No funciona en Safari 5, pero funciona en Safari 6. Safari 5 es casi un navegador muerto ( 0.33%, agosto de 2015 ).

La mayoría de los posibles problemas con los tamaños de fuente relativos no son complicados de solucionar.

Sin embargo, si bien esta es una solución razonable si necesita específicamente una solución solo de CSS, no es lo que recomiendo si es libre de cambiar su HTML (como la mayoría de nosotros).


Esto es lo que yo, como desarrollador web razonablemente experimentado, hago para resolver este problema:

<p>
    <span>Foo</span><span>Bar</span>
</p>

Si, eso es correcto. Elimino el espacio en blanco en el HTML entre los elementos de bloque en línea.

Es fácil. Es simple. Funciona en todas partes. Es la solución pragmática.

A veces tiene que considerar cuidadosamente de dónde vendrá el espacio en blanco. ¿Agregar otro elemento con JavaScript agregará espacios en blanco?No, no si lo haces correctamente.

Vamos a un viaje mágico de diferentes maneras de eliminar el espacio en blanco, con un nuevo HTML:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
  • Puedes hacer esto, como hago habitualmente:

    <ul>
        <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    </ul>

    http://jsfiddle.net/thirtydot/dGHFV/1362/

  • O esto:

    <ul>
        <li>Item 1</li
        ><li>Item 2</li
        ><li>Item 3</li>
    </ul>
  • O use los comentarios:

    <ul>
        <li>Item 1</li><!--
        --><li>Item 2</li><!--
        --><li>Item 3</li>
    </ul>
  • O, si está utilizando PHP o similar:

    <ul>
        <li>Item 1</li><?
        ?><li>Item 2</li><?
        ?><li>Item 3</li>
    </ul>
  • O incluso puede omitir ciertas etiquetas de cierre por completo (todos los navegadores están bien con esto):

    <ul>
        <li>Item 1
        <li>Item 2
        <li>Item 3
    </ul>

Ahora que me fui y te aburrí hasta la muerte con "mil maneras diferentes de eliminar los espacios en blanco, por tres veces", espero que te hayas olvidado por completo font-size: 0.


Alternativamente, ahora puede usar flexbox para lograr muchos de los diseños para los que anteriormente haya utilizado inline-block: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


77
Funciona en FF3.6, IE9RC, O11, Ch9. Sin embargo, en Safari 5 todavía queda una brecha de 1px:(
Šime Vidas

77
@thirtydot ¿Podrías revisar el comentario de esta respuesta ? Podría ser que este font-size:0truco no sea una buena idea después de todo ...
Šime Vidas

25
Sé que el póster está buscando una solución CSS, pero esta solución, que es la más votada (30 votos contra 5 mientras escribo esto), tiene fuertes efectos secundarios y ni siquiera funciona en varios navegadores. En este punto, es más pragmático simplemente eliminar el espacio en blanco problemático en su HTML.
Steph Thirion

10
esta solución solo funciona si no trabaja con EM para los tamaños de sus contenedores
meo

66
Esto rompe elementos secundarios con tamaños de fuente relativos.
Daniel

156

Para los navegadores conformes CSS3 hay white-space-collapsing:discard

ver: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing


¿No te gustaría usar en trim-innerlugar de discard?
spb

49
Esto se eliminó del Nivel de texto 3, pero el Nivel de texto 4 sí . Ya es 2016 y todavía no hay soporte. text-space-collapse:discard
Oriol

1
@ MrLister: Otras soluciones no funcionan en todos los casos. Por ejemplo, no conozco ninguna solución que elimine el espacio final <p>A long text...</p>, donde las etiquetas de apertura y cierre están en líneas separadas que el contenido del texto. Eso es algo que hago todo el tiempo para mantener mis archivos HTML ordenados y legibles.
Robert Kusznier

@Robertfloat
Mr Lister

@MrLister Floating elimina el espacio final de hecho, pero tiene efectos secundarios graves: cambia totalmente la posición del elemento en el diseño del contenedor. ¿Cómo hago eso, cuando flotar un elemento destruye mi diseño (que suele ser el caso)?
Robert Kusznier

94

EDITAR:

hoy, deberíamos usar Flexbox .


ANTIGUA RESPUESTA:

Bien, aunque he votado tanto las respuestas font-size: 0;como las not implemented CSS3 featurerespuestas, después de intentarlo descubrí que ninguna de ellas es una solución real .

En realidad, no hay una sola solución sin fuertes efectos secundarios.

Luego decidí eliminar los espacios (esta respuesta es sobre este argumento) entre los inline-blockdivs de mi HTMLfuente ( JSP), convirtiendo esto:

<div class="inlineBlock">
    I'm an inline-block div
</div>
<div class="inlineBlock">
    I'm an inline-block div
</div>

a esto

<div class="inlineBlock">
    I'm an inline-block div
</div><div class="inlineBlock">
    I'm an inline-block div
</div>

eso es feo, pero funciona.

Pero, espera un minuto ... ¿y si yo estoy generando mis divs dentro Taglibs loops( Struts2, JSTL, etc ...)?

Por ejemplo:

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour">
        <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
            <div class="inlineBlock>
                I'm an inline-block div in a matrix 
                (Do something here with the pushed object...)
           </div>
       </s:push>
    </s:iterator>
</s:iterator>

Es absolutamente imposible pensar en todo eso, significaría

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div></s:push></s:iterator>
</s:iterator>

eso no es legible, difícil de mantener y comprender, etc.

La solución que encontré:

¡use comentarios HTML para conectar el final de un div al comienzo del siguiente!

<s:iterator begin="0" end="6" status="ctrDay">
   <br/>
   <s:iterator begin="0" end="23" status="ctrHour"><!--
    --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
        --><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div><!--
    --></s:push><!--
--></s:iterator>
</s:iterator>

De esta forma, tendrá un código legible y correctamente sangrado.

Y, como un efecto secundario positivo, el HTML source, aunque infestado por comentarios vacíos, resultará correctamente sangrado;

Tomemos el primer ejemplo. En mi humilde opinión, esto:

    <div class="inlineBlock">
        I'm an inline-block div
    </div><!--
 --><div class="inlineBlock">
        I'm an inline-block div
    </div>

es mejor que esto:

    <div class="inlineBlock">
         I'm an inline-block div
    </div><div class="inlineBlock">
         I'm an inline-block div
    </div>

1
Tenga en cuenta que esto también puede romper la funcionalidad de plegado de código en su editor.
jknotek

44

Agregue comentarios entre elementos para NO tener un espacio en blanco. Para mí es más fácil que restablecer el tamaño de fuente a cero y luego volver a configurarlo.

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

Este es un truco que no deberíamos usar en 2020: use flexbox en su
tonygatta

la respuesta fue escrita en 2013. Y aunque flexbox no es una respuesta a la pregunta, esta tampoco funciona pero también funciona: stackoverflow.com/a/37512227/1019850
David

42

Todas las técnicas de eliminación de espacio para display:inline-block son trucos desagradables ...

Use Flexbox

Es increíble, resuelve todo este diseño de bloques en línea bs y, a partir de 2017, tiene un 98% de compatibilidad con el navegador (más si no te importan los viejos IE).


1
Puede que sea un truco desagradable, pero el tamaño de fuente: 0 funciona en el 100% de los navegadores, y aplicando la pantalla: inline-flex todavía no elimina el espacio en blanco adicional, ¡incluso en un navegador que lo admita!
patrick

@patrick Flexbox definitivamente resuelve el problema, simplemente lo estás haciendo mal. inline-flex no está destinado a mostrar elementos flex en línea, solo se aplica a los contenedores. Ver stackoverflow.com/a/27459133/165673
Yarin el

77
"font-size: 0" no funciona en navegadores 100%. (configuración mínima del navegador de tamaño de fuente). Y esta respuesta es realmente buena.
ViliusL

35

Añadir display: flex; al elemento padre. Aquí está la solución con un prefijo:

Versión simplificada 👇

p {
  display: flex;
}

span {
  width: 100px;
  background: tomato;
  font-size: 30px;
  color: white;
  text-align: center;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>


Arreglar con prefijo 👇

p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: blue;
  font-size: 30px;
  color: white;
  text-align: center;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>


1
Esa es una gran respuesta! Sin embargo, creo que sería bueno poner la versión simplificada en la parte superior, para que sea lo primero que vea un lector. O tal vez incluso eliminar la versión no simplificada.
Stefnotch

1
@Stefnotch Hecho ✅ Gracias por su valiosa sugerencia :-)
Lunes

31

Esta es la misma respuesta que di sobre lo relacionado: Pantalla: Bloque en línea: ¿Qué es ese espacio?

En realidad, hay una manera muy simple de eliminar espacios en blanco del bloque en línea que es fácil y semántica. Se llama una fuente personalizada con espacios de ancho cero, lo que le permite contraer el espacio en blanco (agregado por el navegador para 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 declara la fuente, simplemente cambia la font-familyen el contenedor y de nuevo en los niños, 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;
}

Traje al gusto. Aquí hay una descarga de la fuente que acabo de preparar en font-forge y convertí con el generador de fuentes web FontSquirrel. Me llevó todo 5 minutos. La @font-facedeclaración css está incluida: fuente de espacio de ancho cero comprimido . Está en Google Drive, por lo que deberá hacer clic en Archivo> Descargar para guardarlo en su computadora. Probablemente también necesitará cambiar las rutas de fuente si copia la declaración en su archivo css principal.


1
Creo que te vi publicar esto en CSS Tricks , y para mí esta es una gran respuesta. Es liviano, fácil de implementar y de navegador cruzado (hasta donde mis pruebas lo han demostrado). Estuve totalmente con flexbox hasta que me di cuenta de que Firefox no será compatible flex-wraphasta al menos v28 ( ¿srsly? ), Pero este es un recurso perfecto hasta entonces.
indextwo

16
Este es el peor caso de exageración que vi en mucho tiempo. Descargar una fuente completa solo para eliminar un espacio? Geez
Sr. Lister el

3
@ MrLister, ¿te das cuenta de que ese archivo de fuente es pequeño? No tiene glifos dentro. Yo argumentaría que preferiría incluirlo codificado en base64 de todos modos para que también eliminemos la solicitud.
Robert Koritnik

Esto tiene el mismo defecto fatal que las fuentes de íconos, es decir, no funcionará cuando las fuentes web estén bloqueadas (por ejemplo, por razones de ancho de banda o de seguridad) o sobrescritas por fuentes personalizadas (por ejemplo, por causas de salud, como dislexia, etc.).
tomasz86

22

Dos opciones más basadas en el Módulo de texto CSS Nivel 3 (en lugar de white-space-collapsing:discardque se hayan eliminado del borrador de especificaciones):

  • word-spacing: -100%;

En teoría, debe hacer exactamente lo que se necesita: acortar los espacios en blanco entre 'palabras' en el 100% del ancho del carácter del espacio, es decir, a cero. Pero parece que no funciona en ningún lado, desafortunadamente, y esta característica está marcada como 'en riesgo' (también se puede eliminar de la especificación).

  • word-spacing: -1ch;

Acorta los espacios entre palabras por el ancho del dígito '0'. En una fuente monoespacio debe ser exactamente igual al ancho del carácter de espacio (y cualquier otro carácter también). Esto funciona en Firefox 10+, Chrome 27+, y casi funciona en Internet Explorer 9+.

Violín


+1 para el espaciado de palabras, aunque -0.5ch es el valor correcto, con -1ch el texto sin espacios no será legible, -0.5ch se comporta igual que font-size: 0; con tamaño de conjunto explícito en elementos de texto. :)
Dennis98

66
@ Dennis98, -1ch solo funciona para fuentes monoespaciales (como Courier New), porque todos sus caracteres tienen el mismo ancho, incluidos ' 'y '0'. En las fuentes no monoespaciales no hay una proporción mágica adecuada entre anchos ' 'y '0'caracteres, por chlo que no es de mucha ayuda.
Ilya Streltsyn

en lugar de word-spacing, podríamos usar letter-spacingun valor negativo grande arbitrario como se muestra en mi respuesta
S.Serpooshan

20

Desafortunadamente, es 2019 y white-space-collapseaún no está implementado.

Mientras tanto, dele el elemento padre font-size: 0;y establezca el font-sizeen los hijos. Esto debería funcionar


16

Use flexbox y realice una reserva (de las sugerencias anteriores) para navegadores antiguos:

ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

13

Simple:

item {
  display: inline-block;
  margin-right: -0.25em;
}

No es necesario tocar el elemento padre.

Solo condición aquí: el tamaño de fuente del elemento no debe definirse (debe ser igual al tamaño de fuente del elemento primario).

0.25em es el predeterminado word-spacing

W3Schools - propiedad de espacio entre palabras


0.25em no es el "espaciado de palabras predeterminado", es el ancho del espacio en blanco en la fuente Times New Roman que resulta ser la fuente predeterminada en algunos sistemas operativos populares. Otras fuentes populares como Helvetica a menudo tienen un carácter de espacio en blanco más amplio, por lo que eliminar solo 0.25em de ellas sería insuficiente para deshacerse de las brechas.
Ilya Streltsyn

12

tamaño de fuente: 0; puede ser un poco más complicado de administrar ...

Creo que las siguientes dos líneas son mucho mejores y más reutilizables, y ahorran tiempo que cualquier otro método. Yo personalmente uso esto:

.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

Entonces puedes usarlo de la siguiente manera ...

<ul class="items">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Hasta donde yo sé (puedo estar equivocado) pero todos los navegadores admiten este método.

EXPLICACIÓN :

Esto funciona (tal vez -3px puede ser mejor) exactamente como lo anticiparía.

  • Copias y pegas el código (una vez)
  • luego en su html solo use class="items"en el padre de cada bloque en línea.

NO tendrá la necesidad de volver a css y agregar otra regla css para sus nuevos bloques en línea.

Resolviendo dos problemas a la vez.

También tenga en cuenta que >(mayor que el signo) esto significa que * / todos los niños deben estar en línea bloqueada.

http://jsfiddle.net/fD5u3/

NOTA: He modificado para acomodar para heredar el espacio entre letras cuando un contenedor tiene un contenedor secundario.


en lugar de -4pxpor letter-spacinglo que puede no ser suficiente para grandes tamaños de fuente , por ejemplo: ver este violín , podríamos usar un valor mayor, como en mi post
S.Serpooshan

12

Sin embargo, técnicamente no es una respuesta a la pregunta: "¿Cómo elimino el espacio entre los elementos de bloque en línea?"

Puede probar la solución flexbox y aplicar el código a continuación y se eliminará el espacio.

p {
   display: flex;
   flex-direction: row;
}

Puede obtener más información al respecto en este enlace: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Aunque técnicamente no es una respuesta a "¿puedo hacer esto con el bloqueo en línea", esto me parece una solución elegante ...
Lucas

10

No estoy muy seguro si desea hacer dos tramos azules sin un espacio o si desea manejar otros espacios en blanco, pero si desea eliminar el espacio:

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;

    float: left;
}

Y hecho.


9

Generalmente usamos elementos como este en diferentes líneas, pero en caso de display:inline-block usar etiquetas en la misma línea, se eliminará el espacio, pero en una línea diferente no.

Un ejemplo con etiquetas en una línea diferente:

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Ejemplo con etiquetas en la misma línea

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span><span> Bar </span>
</p>


Otro método eficiente es un trabajo CSS que está utilizando font-size:0el elemento primario y le da font-sizea un elemento secundario todo lo que desee.

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Los métodos anteriores pueden no funcionar en algún lugar dependiendo de la aplicación completa, pero el último método es una solución infalible para esta situación y se puede usar en cualquier lugar.


¡Una desventaja de este método es que necesitamos saber y repetir el tamaño de fuente predeterminado (por ejemplo, 14px) para volverlo a la normalidad en los elementos secundarios!
S.Serpooshan

8

Tuve este problema ahora y desde font-size:0;que descubrí que en Internet Explorer 7 el problema persiste porque Internet Explorer piensa "¿Tamaño de fuente 0?!?! WTF ¿estás loco?" - Entonces, en mi caso tengo el restablecimiento de CSS de Eric Meyer y con font-size:0.01em;una diferencia de 1 píxel de Internet Explorer 7 a Firefox 9, entonces, creo que esto puede ser una solución.


7

p {
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: red;
  font-size: 30px;
  color: white;
}
<p>
  <span> hello </span>
  <span> world </span>
</p>


1
Si bien este fragmento de código puede resolver la pregunta, incluir una explicación realmente ayuda a mejorar la calidad de su publicación. Recuerde que está respondiendo la pregunta para los lectores en el futuro, y que esas personas podrían no conocer los motivos de su sugerencia de código. Por favor, trate de no saturar su código con comentarios explicativos, ¡esto reduce la legibilidad tanto del código como de las explicaciones!
Ashish Ahuja

Supongo que floaty display:inline-blockpara spans estaban destinados a ser retrocesos para el caso si flexno es compatible, pero floatdescartarían efectivamente el efecto de inline-block, por lo que este último parece redundante.
Ilya Streltsyn

6

He estado abordando esto recientemente y en lugar de configurar el padre y font-size:0luego volver a configurar el hijo a un valor razonable, he estado obteniendo resultados consistentes al configurar el contenedor principal y letter-spacing:-.25emluego el hijo nuevamente letter-spacing:normal.

En un hilo alternativo, vi a un comentarista mencionar que font-size:0 no siempre es ideal porque las personas pueden controlar los tamaños mínimos de fuente en sus navegadores, negando por completo la posibilidad de establecer el tamaño de fuente en cero.

El uso de ems parece funcionar independientemente de si el tamaño de fuente especificado es 100%, 15pt o 36px.

http://cdpn.io/dKIjo


En Firefox para Android, veo un espacio de 1 px entre las cajas.
Šime Vidas

5

Creo que hay un método muy simple / antiguo para esto que es compatible con todos los navegadores, incluso IE 6/7. Podríamos simplemente establecer letter-spacingun valor negativo grande en padre y luego volver a establecerlo normalen elementos secundarios:

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */
<p style="color:red">Wrong (default spacing):</p>

<div class="">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

<hr/>

<p style="color:green">Correct (no-spacing):</p>

<div class="no-spacing">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>


lo mismo que sucede aquí necesita establecer letter-spacing:normaltodos los elementos secundarios.
Gaurav Aggarwal

@GauravAggarwal pero letter-spacinges 99.99% de las veces como normal. el tamaño de fuente no tiene un valor tan fijo y depende en gran medida del diseño. podría ser un valor pequeño o un valor grande basado en la familia de fuentes y otras cosas ... Nunca recuerdo en mi vida ver / usar un valor especial (que no sea 0 / normal) para letter-spacing, así que creo que es más seguro y mejor elección
S.Serpooshan

No estoy de acuerdo con esto ... usar el espaciado entre letras a la normalidad con todos los elementos y usar el tamaño de fuente también (si es necesario) no es en absoluto útil, ya que está escribiendo un código doble donde necesita cambiar el tamaño de fuente. El uso del tamaño de fuente no generará un código doble y puede usarse con un tamaño estándar y con cualquier otro tamaño personalizado. Te sugiero que hagas google y compruebes que usar el tamaño de fuente es lo más aceptable en estos días. La solución cambia con el tiempo :)
Gaurav Aggarwal

no puedo entender lo que quieres decir con "... y usar el tamaño de fuente también (si es necesario) no es del todo útil, ya que escribes código doble donde necesitas cambiar el tamaño de fuente". En mi publicación, no hay configuración de tamaño de fuente. todo lo que hice fue el espacio entre letras que generalmente nadie lo configuró en su CSS (siempre es normal). ans ya que no cambiamos el tamaño de fuente, no necesitamos saber el tamaño de fuente original para volver a configurarlo
S.Serpooshan

Supongo que este método no se hizo popular antes porque no funcionaba en Opera / Presto. Y actualmente tenemos otras opciones que no necesitan soluciones alternativas, por ejemplo, usar Flexbox en lugar de bloques en línea.
Ilya Streltsyn


3

Con corchetes PHP:

ul li {
  display: inline-block;
}
    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>


2

Voy a ampliar un poco la respuesta de user5609829, ya que creo que las otras soluciones aquí son demasiado complicadas / demasiado trabajo. La aplicación de a margin-right: -4pxa los elementos de bloque en línea eliminará el espacio y es compatible con todos los navegadores. Vea el violín actualizado aquí . Para los interesados en el uso de los márgenes negativos, tratar de darle a este una lectura.


44
Esto no funcionará si el usuario cambia el tamaño de fuente predeterminado de su navegador. Mejor uso -0.25em.
Martin Schneider


1

Encontré una solución CSS pura que me funcionó muy bien en todos los navegadores:

span {
    display: table-cell;
}

Esta pregunta es sobre el bloqueo en línea.
Madan Bhandari

@MadanBhandari correcto pero parece eliminar la necesidad de todos los trucos sucios.
David

1

Añadir white-space: nowrap al elemento contenedor:

CSS:

* {
    box-sizing: border-box;
}
.row {
    vertical-align: top;
    white-space: nowrap;
}
.column{
    float: left;
    display: inline-block;
    width: 50% // Or whatever in your case
}

HTML:

<div class="row">
    <div class="column"> Some stuff</div>
    <div class="column">Some other stuff</div>
</div>

Aquí está el Plunker .


no funciona sin el flotador, que falta en su plunker. Entonces, "espacio en blanco: nowrap" nunca parece ser una respuesta que funcione.
David

1

Hay un montón de soluciones como font-size:0, word-spacing, margin-left,letter-spacing y así sucesivamente.

Normalmente prefiero usar letter-spacingporque

  1. parece correcto cuando asignamos un valor que es mayor que el ancho del espacio extra (p. ej. -1em ).
  2. Sin embargo, no estará bien word-spacingy margin-leftcuando establecemos un valor mayor como-1em .
  3. El uso font-sizeno es conveniente cuando intentamos usarlo emcomo font-sizeunidad.

Entonces, letter-spacing parece ser la mejor opción.

Sin embargo, tengo que advertirte

cuando usas letter-spacinges mejor que uses otros -0.3emo -0.31emno.

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
  cursor: auto;
}
.nav {
  width: 260px;
  height: 100px;
  background-color: pink;
  color: white;
  font-size: 20px;
  letter-spacing: -1em;
}
.nav__text {
  width: 90px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid black;
  line-height: 40px;
  background-color: yellowgreen;
  text-align: center;
  display: inline-block;
  letter-spacing: normal;
}
<nav class="nav">
    <span class="nav__text">nav1</span>
    <span class="nav__text">nav2</span>
    <span class="nav__text">nav3</span>
</nav>

Si está utilizando Chrome (versión de prueba 66.0.3359.139) u Opera (versión de prueba 53.0.2907.99), lo que verá podría ser:

ingrese la descripción de la imagen aquí

Si está utilizando Firefox (60.0.2), IE10 o Edge, lo que verá podría ser:

ingrese la descripción de la imagen aquí

Eso es interesante. Entonces, verifiqué el espaciado entre letras y mdn y encontré esto:

longitud

Especifica espacio adicional entre caracteres además del espacio predeterminado entre caracteres. Los valores pueden ser negativos, pero puede haber límites específicos de implementación. Los agentes de usuario no pueden aumentar o disminuir aún más el espacio entre caracteres para justificar el texto.

Parece que esta es la razón.


1

Agregue letter-spacing:-4px;el pCSS principal y agregue letter-spacing:0px;a su spanCSS.

span {
  display:inline-block;
  width:100px;
  background-color:palevioletred;
  vertical-align:bottom;
  letter-spacing:0px;
}

p {
  letter-spacing:-4px;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>


1

Pensé que agregaría algo nuevo a esta pregunta, ya que aunque muchas de las respuestas proporcionadas actualmente son más que adecuadas y relevantes, hay algunas nuevas propiedades CSS que pueden lograr una salida muy limpia, con soporte completo en todos los navegadores, y poco sin 'hacks'. Esto se aleja, inline-blockpero le da los mismos resultados que la pregunta solicitada.

Estas propiedades CSS son grid

CSS Grid es altamente compatible ( CanIUse ) aparte de IE, que solo necesita un -ms-prefijo para que funcione.

CSS Grid también es muy flexible, y toma todas las partes buenas de table, flexyinline-block elementos y los pone en un solo lugar.

Al crear un gridpuede especificar los espacios entre las filas y columnas. El espacio predeterminado ya está configurado, 0pxpero puede cambiar este valor a lo que desee.

Para acortarlo un poco, aquí hay un ejemplo de trabajo relevante:

body {
  background: lightblue;
  font-family: sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-column-gap: 0; /* Not needed but useful for example */
  grid-row-gap: 0; /* Not needed but useful for example */
}

.box {
  background: red;
}
.box:nth-child(even) {
  background: green;
}
<div class="container">
  <div class="box">
    Hello
  </div>
  <div class="box">
    Test
  </div>  
</div>


Solo comentar para señalar que el contenido de un display:gridelemento está bloqueado, por lo que no es tanto lo que se muestra: la cuadrícula lo ayuda a trabajar con diseños de bloque en línea, sino que le permite reemplazar el trabajo inline-blockcon algo donde puede controlar las 'canaletas' como Esta pregunta quiere. Además, estoy realmente sorprendido de que nadie haya respondido con una solución de diseño de cuadrícula CSS hasta ahora.
TylerH

Lo aclarará, esto es un cambio de inline-block. Y sí, también me sorprendió, supongo que nadie con gridexperiencia realmente había llegado a esto antes. He estado jugando un poco y me encontré con esta pregunta, así que pensé por qué no: P
Stewartside

0

Otra forma que encontré es aplicar el margen izquierdo como valores negativos, excepto el primer elemento de la fila.

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}

0

Cada pregunta que intenta eliminar el espacio entre inline-blocks parece una<table> ...

Intenta algo como esto:

p {
  display: table;
}
span {
  width: 100px;
  border: 1px solid silver; /* added for visualization only*/
  display: table-cell;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.