Como removo o espaço entre os elementos inline / inline-block?

Dado este HTML e CSS:

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

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

Como resultado, haverá um espaço de 4 pixels de largura entre os elementos SPAN.

Demonstração: http://jsfiddle.net/dGHFV/

Entendo por que isso acontece e também sei que poderia me livrar desse espaço removendo o espaço em branco entre os elementos SPAN no código-fonte HTML, da seguinte forma:

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

No entanto, eu esperava uma solução CSS que não exija que o código-fonte HTML seja violado.

Eu sei como resolver isso com JavaScript - removendo os nós de texto do elemento contêiner (o parágrafo), da seguinte maneira:

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

Demonstração: http://jsfiddle.net/dGHFV/1/

Mas esse problema pode ser resolvido apenas com CSS?

Como essa resposta se tornou bastante popular, estou reescrevendo-a significativamente.

Não vamos esquecer a pergunta real que foi feita:

Como remover o espaço entre os elementos de bloco embutido ? Eu esperava uma solução CSS que não exija que o código-fonte HTML seja violado. Esse problema pode ser resolvido apenas com CSS?

Ele é possível resolver este problema apenas com CSS, mas não há completamente correções de CSS robustos.

A solução que tive na minha resposta inicial foi adicionar font-size: 0ao elemento pai e declarar sensato font-sizeos filhos.

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

Isso funciona nas versões recentes de todos os navegadores modernos. Funciona no IE8. Ele não funciona no Safari 5, mas faz o trabalho no Safari 6. Safari 5 é quase um navegador mortos ( 0,33%, agosto 2015 ).

A maioria dos problemas possíveis com tamanhos de fonte relativos não é complicada de corrigir.

Entretanto, embora essa seja uma solução razoável, se você precisar especificamente de uma correção apenas de CSS, não é o que eu recomendo se você estiver livre para alterar seu HTML (como a maioria de nós).

Isto é o que eu, como desenvolvedor web razoavelmente experiente, realmente faço para resolver este problema:

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

Sim está certo. Eu removo o espaço em branco no HTML entre os elementos do bloco embutido.

É fácil. É simples. Funciona em qualquer lugar. É a solução pragmática.

Às vezes, é necessário considerar cuidadosamente de onde virá o espaço em branco. Acrescentar outro elemento ao JavaScript adicionará espaço em branco?Não, não se você fizer isso corretamente.

Vamos fazer uma jornada mágica de diferentes maneiras de remover o espaço em branco, com um novo HTML:

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

• Você pode fazer isso, como eu costumo fazer:

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

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

• Ou isto:

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

• Ou use comentários:

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

• Ou, se você estiver usando o PHP ou similar:

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

• Ou você pode até pular certas tags de fechamento completamente (todos os navegadores estão bem com isso):

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

Agora que eu o aborreci até a morte com "mil maneiras diferentes de remover o espaço em branco, aos trinta pontos", espero que você tenha esquecido tudo font-size: 0.

Como alternativa, agora você pode usar o flexbox para obter muitos dos layouts usados ​​anteriormente em bloco em linha para: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Para navegadores em conformidade com CSS3, há white-space-collapsing:discard

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

EDITAR:

hoje, devemos apenas usar o Flexbox .

RESPOSTA ANTIGA:

OK, embora eu tenha votado tanto nas respostas font-size: 0;quanto nas not implemented CSS3 featurerespostas, depois de tentar, descobri que nenhuma delas é uma solução real .

Na verdade, não há sequer uma solução alternativa sem fortes efeitos colaterais.

Então eu decidi remover os espaços (estas respostas é sobre este argumento) entre os inline-blockdivs de minha HTMLfonte ( JSP), transformando esta:

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

para isso

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

isso é feio, mas está funcionando.

Mas, espere um minuto ... e se eu estou gerando meu divs dentro Taglibs loops( Struts2, JSTL, etc ...)?

Por exemplo:

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

Não é absolutamente possível alinhar todas essas coisas, isso significaria

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

que não é legível, difícil de manter e entender, etc ...

A solução que encontrei:

use comentários HTML para conectar o final de uma div ao início da próxima!

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

Dessa forma, você terá um código legível e recuado corretamente.

E, como efeito colateral positivo, o resultado HTML source, embora infestado por comentários vazios, resultará corretamente recuado;

vamos dar o primeiro exemplo. Na minha humilde opinião, isso:

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

é melhor que isso:

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

Adicione comentários entre os elementos para NÃO ter um espaço em branco. Para mim, é mais fácil do que redefinir o tamanho da fonte para zero e depois restaurá-lo.

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

Todas as técnicas de eliminação de espaço display:inline-blocksão hacks desagradáveis ​​...

Use o Flexbox

É incrível, resolve todo esse layout de bloco em linha bs e, a partir de 2017, possui 98% de suporte ao navegador (mais se você não se importa com IEs antigos).

• Estamos prontos para usar o Flexbox?
• Usando caixas flexíveis CSS - Guia do desenvolvedor da Web | MDN
• Um guia completo para o Flexbox | Truques CSS
• Flexy Boxes - Ferramenta de geração de código e playground CSS flexbox

Adicione display: flex;ao elemento pai. Aqui está a solução com um prefixo:

Versão 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>

Corrigir com prefixo 👇

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>

Esta é a mesma resposta que eu dei sobre o relacionado: Display: Bloco embutido - Que espaço é esse?

Na verdade, existe uma maneira muito simples de remover o espaço em branco do bloco embutido que é fácil e semântico. Ele é chamado de fonte personalizada com espaços de largura zero, o que permite recolher o espaço em branco (adicionado pelo navegador para elementos embutidos quando estão em linhas separadas) no nível da fonte usando uma fonte muito pequena. Depois de declarar a fonte, basta alterar font-familyo contêiner e voltar novamente para os filhos, e pronto. Como isso:

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

Terno a gosto. Aqui está um download para a fonte que acabei de criar no font-forge e convertida com o gerador de fontes da Web FontSquirrel. Levei todos os 5 minutos. A @font-facedeclaração css está incluída: fonte de espaço com largura zero compactada . Está no Google Drive, então você precisa clicar em Arquivo> Download para salvá-lo no seu computador. Você provavelmente também precisará alterar os caminhos da fonte se copiar a declaração no seu arquivo css principal.

Mais duas opções baseadas no nível 3 do módulo de texto CSS (em vez de white-space-collapsing:discardserem retiradas do rascunho da especificação):

• word-spacing: -100%;

Em teoria, ele deve fazer exatamente o que é necessário - reduzir os espaços em branco entre as 'palavras' em 100% da largura dos caracteres do espaço, ou seja, para zero. Infelizmente, parece não funcionar em lugar algum, e esse recurso está marcado como 'em risco' (também pode ser excluído da especificação).

• word-spacing: -1ch;

Reduz os espaços entre as palavras pela largura do dígito '0'. Em uma fonte monoespaçada, ela deve ser exatamente igual à largura do caractere de espaço (e de qualquer outro caractere também). Isso funciona no Firefox 10+, Chrome 27+ e quase funciona no Internet Explorer 9+.

Violino

Infelizmente, é 2019 e white-space-collapseainda não foi implementado.

Enquanto isso, forneça o elemento pai font-size: 0;e defina font-sizeos filhos. Isso deve fazer o truque

Use o flexbox e faça um fallback (das sugestões acima) para navegadores mais antigos:

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

Simples:

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

Não há necessidade de tocar no elemento pai.

Somente condição aqui: o tamanho da fonte do item não deve ser definido (deve ser igual ao tamanho da fonte do pai).

0.25em é o padrão word-spacing

W3Schools - propriedade espaçamento de palavras

tamanho da fonte: 0; pode ser um pouco mais difícil de gerenciar ...

Penso que as duas linhas seguintes são muito melhores, mais reutilizáveis ​​e economizam tempo do que qualquer outro método. Eu pessoalmente uso isso:

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

Então você pode usá-lo da seguinte forma ...

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

Tanto quanto eu sei (posso estar errado), mas todos os navegadores suportam esse método.

EXPLICAÇÃO :

Isso funciona (talvez -3px seja melhor) exatamente como você esperaria que funcionasse.

• você copia e cola o código (uma vez)
• então no seu html basta usar class="items" o pai de cada bloco embutido.

Você NÃO precisará voltar ao css e adicionar outra regra css para seus novos blocos embutidos.

Resolvendo dois problemas ao mesmo tempo.

Observe também que >(maior que o sinal) significa que * / todas as crianças devem estar em bloco inline.

http://jsfiddle.net/fD5u3/

NOTA: Modifiquei para acomodar para herdar o espaçamento entre letras quando um wrapper tem um wrapper filho.

Porém, tecnicamente, não é uma resposta para a pergunta: "Como removo o espaço entre os elementos de bloco embutido?"

Você pode experimentar a solução flexbox e aplicar o código abaixo e o espaço será removido.

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

Você pode aprender mais sobre isso neste link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Não tenho certeza se você deseja fazer duas extensões azuis sem uma lacuna ou se deseja lidar com outro espaço em branco, mas se deseja remover a lacuna:

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

    float: left;
}

E feito.

Geralmente, usamos elementos como este em linhas diferentes, mas no caso de display:inline-blockusar tags na mesma linha, o espaço será removido, mas em uma linha diferente não.

Um exemplo com tags em uma linha diferente:

p span {
  display: inline-block;
  background: red;
}

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

Exemplo com tags na mesma linha

p span {
  display: inline-block;
  background: red;
}

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

Outro método eficiente é um trabalho CSS que está usando font-size:0o elemento pai e fornece font-sizea um elemento filho o quanto você deseja.

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

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

Os métodos acima podem não funcionar em algum lugar, dependendo de todo o aplicativo, mas o último método é uma solução infalível para essa situação e pode ser usado em qualquer lugar.

Eu estava com esse problema agora e, desde então font-size:0;, descobri que no Internet Explorer 7 o problema permanece porque o Internet Explorer pensa "Tamanho da fonte 0?!?! WTF, você é louco?" - Então, no meu caso, redefini o CSS de Eric Meyer e, com font-size:0.01em;uma diferença de 1 pixel do Internet Explorer 7 para o Firefox 9, acho que isso pode ser uma solução.

Eu estive abordando isso recentemente e, em vez de definir o pai e font-size:0depois restaurar o filho para um valor razoável, tenho obtido resultados consistentes configurando o contêiner pai letter-spacing:-.25eme o filho novamente letter-spacing:normal.

Em um tópico alternativo, vi um comentarista mencionar que font-size:0nem sempre é ideal porque as pessoas podem controlar tamanhos mínimos de fonte em seus navegadores, negando completamente a possibilidade de definir o tamanho da fonte como zero.

O uso do ems parece funcionar, independentemente do tamanho da fonte especificado ser 100%, 15pt ou 36px.

http://cdpn.io/dKIjo

Eu acho que existe um método muito simples / antigo para isso, que é suportado por todos os navegadores, mesmo o IE 6/7. Nós poderíamos simplesmente definir letter-spacingum valor negativo grande em pai e depois defini-lo novamente normalem elementos filho:

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>

A resposta mais simples para esta pergunta é adicionar.

css

float: left;

link do codepen: http://jsfiddle.net/dGHFV/3560/

Com colchetes PHP:

ul li {
  display: inline-block;
}

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

Vou expandir um pouco a resposta do user5609829, pois acredito que as outras soluções aqui são muito complicadas / muito trabalho. A aplicação de um margin-right: -4pxaos elementos do bloco embutido removerá o espaçamento e é suportada por todos os navegadores. Veja o violino atualizado aqui . Para aqueles preocupados com o uso de margens negativas, tente dar esta uma leitura.

A especificação CSS Text Module Level 4 define umatext-space-collapse propriedade que permite controlar como o espaço em branco dentro e ao redor de um elemento é processado.

Portanto, em relação ao seu exemplo, você apenas teria que escrever isto:

p {
  text-space-collapse: discard;
}

Infelizmente, nenhum navegador está implementando essa propriedade ainda (a partir de setembro de 2016), conforme mencionado nos comentários à resposta da HBP .

Encontrei uma solução CSS pura que funcionou muito bem para mim em todos os navegadores:

span {
    display: table-cell;
}

Adicione white-space: nowrapao elemento container:

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>

Aqui está o Plunker .

Há muitas soluções, como font-size:0, word-spacing, margin-left, letter-spacinge assim por diante.

Normalmente eu prefiro usar letter-spacingporque

1. parece bom quando atribuímos um valor maior que a largura do espaço extra (por exemplo -1em).
2. No entanto, não ficará bem com word-spacinge margin-leftquando definirmos um valor maior como -1em.
3. O uso font-sizenão é conveniente quando tentamos usar emcomo font-sizeunidade.

Então, letter-spacingparece ser a melhor escolha.

No entanto, tenho que avisar você

quando você usa, letter-spacingé melhor usar -0.3emou -0.31emnão outros.

* {
  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>

Se você estiver usando o Chrome (versão de teste 66.0.3359.139) ou Opera (versão de teste 53.0.2907.99), o que você vê pode ser:

Se você estiver usando o Firefox (60.0.2), IE10 ou Edge, o que você vê pode ser:

Isso é interessante. Então, verifiquei o espaçamento mdn-letra e encontrei o seguinte:

comprimento

Especifica o espaço extra entre caracteres, além do espaço padrão entre os caracteres. Os valores podem ser negativos, mas pode haver limites específicos da implementação. Os agentes do usuário não podem aumentar ou diminuir ainda mais o espaço entre caracteres para justificar o texto.

Parece que esse é o motivo.

Adicione letter-spacing:-4px;no pCSS pai e adicione letter-spacing:0px;ao seu 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>

Pensei em acrescentar algo novo a esta pergunta, embora muitas das respostas atualmente fornecidas sejam mais que adequadas e relevantes, existem algumas novas propriedades CSS que podem obter uma saída muito limpa, com suporte total em todos os navegadores e pouco a sem 'hacks'. Isso se afasta, inline-blockmas fornece os mesmos resultados que a pergunta solicitada.

Essas propriedades CSS são grid

CSS Grid é altamente suportado ( CanIUse ), exceto o IE, que precisa apenas de um -ms-prefixo para permitir que ele funcione.

CSS grade também é altamente flexível, e toma todas as partes boas de table, flexeinline-block elementos e traz-los em um só lugar.

Ao criar um, gridvocê pode especificar as lacunas entre as linhas e colunas. A diferença padrão já está definida como, 0pxmas você pode alterar esse valor para o que quiser.

Para resumir um pouco, aqui está um exemplo de trabalho 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>

Outra maneira que encontrei é aplicar margem esquerda como valores negativos, exceto o primeiro elemento da linha.

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

Todas as perguntas que tentam remover o espaço entre inline-blocks parecem um<table> ...

Tente algo como isto:

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>