html - poner - ¿Cómo elimino el espacio entre los elementos de bloque en línea?

quitar espacio entre elementos html

Question

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 de SPAN en el código fuente HTML, como por ejemplo:

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

Sin embargo, esperaba una solución CSS que no requiera que se manipule el 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 con CSS solo?

Answer 1

Añadir display: flex; al elemento padre. Aquí está la solución con un 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>

Actualizar

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>

Answer 2

Añadir letter-spacing:-4px; en letter-spacing:0px; y agregue letter-spacing:0px; a su span css.

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>

Answer 3

Agrega 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 establecerlo.

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

Answer 4

Agregue 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 .

Answer 5

Cada pregunta, que intenta eliminar el espacio entre inline-block s parece una <table> para mí ...

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>

Answer 6

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 que el código fuente HTML sea manipulado. ¿Se puede resolver este problema solo con CSS?

Es posible resolver este problema solo con CSS, pero no hay correcciones de CSS completamente robustas.

La solución que tuve en mi respuesta inicial fue agregar font-size: 0 al elemento principal y luego declarar un font-size razonable en los elementos secundarios.

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 sí funciona en Safari 6. Safari 5 es casi un navegador inactivo ( 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 específicamente necesitas una solución CSS, no es lo que recomiendo si eres libre de cambiar tu HTML (como lo somos la mayoría de nosotros).

Esto es lo que yo, como desarrollador web con una experiencia razonable, realmente hago para resolver este problema:

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

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

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

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

Vayamos a un viaje mágico de diferentes maneras para eliminar el espacio en blanco, con algunos HTML nuevos:

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

• Puedes hacer esto, como normalmente lo hago:

  <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 comentarios:

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

• O incluso puede omitir certain 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 he ido y te he aburrido hasta la muerte con "mil formas diferentes de eliminar espacios en blanco, por treintadot", espero que hayas olvidado todo sobre font-size: 0 .

Alternativamente, ahora puede usar flexbox para lograr muchos de los diseños que puede haber usado previamente en bloque en línea para: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 7

Con los soportes de PHP:

ul li {
  display: inline-block;
}

    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>

Answer 8

Creo que hay un método muy simple / antiguo para esto que es compatible con todos los navegadores, incluso IE 6/7. Simplemente podríamos establecer letter-spacing en un valor negativo grande en el padre y luego normal en normal en los elementos hijos:

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>

Answer 9

Desafortunadamente, es 2015 y white-space-collapse aún no está implementado.

Mientras tanto, dale al elemento padre font-size: 0; y establecer el font-size en los niños. Esto debería funcionar

Answer 10

Dos opciones más basadas en el Nivel de Módulo de Texto CSS 3 (en lugar de white-space-collapsing:discard que se había eliminado del borrador de especificaciones):

• word-spacing: -100%;

En teoría, debería 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. Lamentablemente, parece que no funciona en ninguna parte, 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 en el ancho del dígito ''0''. En una fuente monoespaciada debe ser exactamente igual al ancho del carácter de espacio (y también de cualquier otro carácter). Esto funciona en Firefox 10+, Chrome 27+ y casi funciona en Internet Explorer 9+.

Fiddle

Answer 11

Esta es la misma respuesta que di en el tema: Pantalla: Bloque en línea: ¿qué es ese espacio?

En realidad, hay una manera realmente sencilla de eliminar los espacios en blanco del bloque en línea que es fácil y semántico. Se llama fuente personalizada con espacios de ancho cero, lo que le permite colapsar los espacios en blanco (agregados 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 declara la fuente, simplemente cambie la font-family en el contenedor y nuevamente 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 a gusto. Aquí hay una descarga de la fuente que acabo de preparar en Font-Forge y convertí con el generador FontSquirrel webfont. Me tomó todos los 5 minutos. Se incluye la declaración css @font-face : fuente de espacio comprimida de ancho cero . Está en Google Drive, por lo que deberá hacer clic en Archivo> Descargar para guardarlo en su computadora. Es probable que también deba cambiar las rutas de las fuentes si copia la declaración a su archivo css principal.

Answer 12

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

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 de CSS que usa font-size:0 para el elemento principal y font-size a un elemento secundario tanto como desee.

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}

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

Es posible que los métodos anteriores no funcionen 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 utilizar en cualquier lugar.

Answer 13

Hay muchas soluciones como font-size:0 , word-spacing , margin-left , letter-spacing , etc.

Normalmente prefiero usar letter-spacing porque

1. parece correcto cuando asignamos un valor que es mayor que el ancho del espacio adicional (por ejemplo, -1em ).
2. Sin embargo, no estará bien con word-spacing y el margin-left cuando configuramos un valor mayor como -1em .
3. Usar font-size no es conveniente cuando intentamos usar em como unidad de font-size .

Por lo tanto, letter-spacing parece ser la mejor opción.

Sin embargo, tengo que avisarte

cuando use letter-spacing -0.3em mejor que use -0.3em o -0.31em no otros.

* {
  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ás usando Chrome (versión de prueba 66.0.3359.139) u Opera (versión de prueba 53.0.2907.99), lo que ves podría ser:

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

Eso es interesante. Entonces, verifiqué el mdn-letter-spacing y encontré esto:

longitud

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

Parece que esta es la razón.

Answer 14

He estado abordando esto recientemente y, en lugar de establecer el font-size:0 principal font-size:0 luego volver a establecer el niño en un valor razonable, he estado obteniendo resultados consistentes al establecer el letter-spacing:-.25em contenedor principal letter-spacing:-.25em Volver al 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 de fuente mínimos en sus navegadores, lo que anula completamente 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

Answer 15

La especificación del nivel 4 del módulo de texto CSS define una propiedad de text-space-collapse , que permite controlar cómo se procesa el espacio en blanco dentro y alrededor de un elemento.

Entonces, con respecto a tu ejemplo, solo tendrías que escribir esto:

p {
  text-space-collapse: discard;
}

Desafortunadamente, ningún navegador está implementando esta propiedad todavía (a partir de septiembre de 2016) como se menciona en los comentarios a la respuesta de HBP .

Answer 16

La respuesta más simple a esta pregunta es agregar.

css

float: left;

Enlace de código: http://jsfiddle.net/dGHFV/3560/

Answer 17

No estoy muy seguro de 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.

Answer 18

Ok, aunque he subido tanto el font-size: 0; la font-size: 0; y las respuestas de la not implemented CSS3 feature , 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 divs de inline-block de mi fuente HTML ( JSP ), y 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, espere un minuto ... ¿y si estoy generando mis divs dentro de los 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 todas esas cosas, 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, es difícil de mantener y entender, 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 manera tendrás un código legible y correctamente sangrado.

Y, como efecto secundario positivo, la HTML source , aunque está infestada por comentarios vacíos, tendrá una sangría correcta;

Tomemos el primer ejemplo, imho 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>

Espero que ayude...

Answer 19

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;
}

Answer 20

Para los navegadores compatibles con CSS3 hay white-space-collapsing:discard

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

Answer 21

Probé la solución de font-size: 0 a un problema similar en React y Sass para un proyecto de Free Code Camp en el que estoy trabajando actualmente.

¡Y funciona!

Primero, el guión:

var ActionBox = React.createClass({
    render: function() {
        return(
            <div id="actionBox">
                </div>
        );
    },
});

var ApplicationGrid = React.createClass({
    render: function() {
        var row = [];
        for(var j=0; j<30; j++){
            for(var i=0; i<30; i++){
                row.push(<ActionBox />);
            }
        }
        return(
            <div id="applicationGrid">
                {row}
            </div>
        );
     },
});

var ButtonsAndGrid = React.createClass({
    render: function() {
        return(
            <div>
                <div id="buttonsDiv">
                </div>
                <ApplicationGrid />
            </div>
        );
    },
});

var MyApp = React.createClass({
    render: function() {
        return(
            <div id="mainDiv">
                <h1> Game of Life! </h1>
                <ButtonsAndGrid />
            </div>
        );
    },
});

ReactDOM.render(
    <MyApp />,
    document.getElementById(''GoL'')
);

Entonces, el Sass:

html, body
    height: 100%

body
    height: 100%
    margin: 0
    padding: 0

#mainDiv
    width: 80%
    height: 60%
    margin: auto
    padding-top: 5px
    padding-bottom: 5px
    background-color: DeepSkyBlue
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#buttonsDiv
    width: 80%
    height: 60%
    margin: auto
    margin-bottom: 0px
    padding-top: 5px
    padding-bottom: 0px
    background-color: grey
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#applicationGrid
    width: 65%
    height: 50%
    padding-top: 0px
    margin: auto
    font-size: 0
    margin-top: 0px
    padding-bottom: 5px
    background-color: white
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#actionBox
    width: 20px
    height: 20PX
    padding-top: 0px
    display: inline-block
    margin-top: 0px
    padding-bottom: 0px
    background-color: lightgrey
    text-align: center
    border: 2px solid grey
    margin-bottom: 0px

Answer 22

Sólo por diversión: una solución fácil de JavaScript.

document.querySelectorAll(''.container'').forEach(clear);

function clear(element) {
  element.childNodes.forEach(check, element);
}

function check(item) {
  if (item.nodeType === 3) this.removeChild(item);
}

span {
  display: inline-block;
  width: 100px;
  background-color: palevioletred;
}

<p class="container">
  <span> Foo </span>
  <span> Bar </span>
</p>

Answer 23

Sencillo:

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

No hay necesidad de tocar el elemento padre.

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

0.25em es el word-spacing predeterminado

W3Schools - propiedad de espaciado de palabras

Answer 24

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 siguiente 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/

Answer 25

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

Utilizar Flexbox

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

• ¿Estamos listos para usar Flexbox?
• Flexbox Flexbox
• Una guía completa para Flexbox | Trucos CSS
• Flexy Boxes - CSS flexbox playground y herramienta de generación de código

Answer 26

Tuve este problema en este momento y de font-size:0; de font-size:0; Descubrí que en Internet Explorer 7 el problema sigue siendo 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; Tengo una diferencia de 1 píxel de Internet Explorer 7 a Firefox 9, así que creo que esto puede ser una solución.

Answer 27

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

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

Answer 28

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 un margin-right: -4px a los elementos de bloque en línea eliminará el espacio y es compatible con todos los navegadores. Vea el violín actualizado here . Para aquellos preocupados por el uso de márgenes negativos, intente leer esto.

Answer 29

tamaño de letra: 0; Puede ser un poco más difícil de manejar ...

Creo que el siguiente par de líneas es mucho mejor y más reutilizable, y ahorra 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 como sigue ...

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

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

EXPLICACIÓN :

Esto funciona (quizás -3px puede ser mejor) exactamente como lo anticiparía para que funcione.

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

NO tendrá la necesidad de volver al css y agregar otra regla de 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 hijos deben estar en línea.

http://jsfiddle.net/fD5u3/

NOTA: He modificado para acomodar para heredar el espaciado entre letras cuando un envoltorio tiene un envoltorio secundario.

Answer 30

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>