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


1068

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?


Veja a minha resposta nesta pergunta para obter um conjunto completo de opções relevantes agora: stackoverflow.com/questions/14630061/…
#


Respostas:


1006

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/


7
Funciona em FF3.6, IE9RC, O11, Ch9. No entanto, no Safari 5 ainda existe uma grande diferença de 1px:(
Šime Vidas

7
@thirtydot Você pode conferir o comentário desta resposta . Pode ser que esse font-size:0truque não seja uma boa idéia, afinal ...
Šime Vidas

25
Eu sei que o pôster está procurando uma solução CSS, mas essa solução - que é de longe a mais votada (30 votos contra 5 no momento em que escrevo isso) - tem fortes efeitos colaterais e nem sequer funciona em vários navegadores. Neste ponto, é mais pragmático simplesmente remover o espaço em branco problemático no seu HTML.
precisa

10
esta solução só funciona se você não trabalho com EMS para seus tamanhos de recipientes
meo

6
Isso divide elementos filho com tamanhos de fonte relativos.
Daniel

156

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


Você não gostaria de usar trim-innerao invés de discard?
Spb 25/07/2013

49
Isso foi removido do Nível de texto 3, mas o Nível de texto 4 foi . Já é 2016 e ainda não há suporte. text-space-collapse:discard
Oriol 4/16

1
@ MrLister: Outras soluções não funcionam em todos os casos. Por exemplo, não conheço nenhuma solução que remova o espaço à direita de <p>A long text...</p>onde as tags de abertura e fechamento estão em linhas separadas do conteúdo do texto. É algo que faço o tempo todo para manter meus arquivos HTML organizados e legíveis.
Robert Kusznier

@Robertfloat
Mr Lister

O @MrLister Floating remove o espaço à direita, mas tem efeitos colaterais sérios - altera totalmente a posição do elemento no layout do contêiner. Como faço isso, quando flutuar um elemento destrói meu layout (que geralmente é o caso)?
Robert Kusznier

94

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>

1
Observe que isso também pode quebrar a funcionalidade de dobragem de código no seu editor.
Jknotek # 04/18

44

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>

Este é um truque que não devemos usar em 2020: use flexbox em vez disso caniuse.com/#feat=flexbox
tonygatta

a resposta foi escrita em 2013. E enquanto o flexbox não é uma resposta para a pergunta, essa também não está funcionando: stackoverflow.com/a/37512227/1019850
David

42

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


1
o hack desagradável pode ser, mas o tamanho da fonte: 0 funciona em 100% dos navegadores e a aplicação de display: o inline-flex ainda não se livra do espaço em branco extra, mesmo em um navegador que o suporta!
patrick

@patrick Flexbox definitivamente resolve o problema, você está fazendo errado. inline-flex não se destina a exibir itens flexíveis inline - aplica-se apenas a contêineres. Veja stackoverflow.com/a/27459133/165673
Yarin

7
"font-size: 0" não funciona em navegadores 100%. (configurações mínimas do navegador de tamanho de fonte). E essa resposta é realmente boa.
ViliusL

35

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>


1
Essa é uma ótima resposta! No entanto, acho que seria legal colocar a versão simplificada no topo, para que seja a primeira coisa que um leitor veja. Ou talvez até remova a versão não simplificada.
Stefnotch 14/04

1
@Stefnotch Feito ✅ Obrigado por sua sugestão valiosa :-)
Mo.

31

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.


1
Eu vi você postar isso em CSS Tricks, eu acho, e para mim esta é uma ótima resposta. É leve, fácil de implementar e em vários navegadores (até onde meus testes mostraram). Eu estava indo totalmente com o flexbox até perceber que o Firefox não suportaria flex-wrapaté pelo menos a v28 ( srsly? ), Mas esse é um substituto perfeito até então.
indextwo

16
Este é o pior caso de exagero que vi há muito tempo. Baixar uma fonte inteira apenas para remover um espaço? Nossa.
Lister

3
@ MrLister você percebe que esse arquivo de fonte é minúsculo? Não possui nenhum glifo dentro. Eu argumentaria que preferia incluí-lo codificado em base64 de qualquer maneira, para nos livrarmos da solicitação também.
Robert Koritnik

Isso tem a mesma falha fatal que as fontes de ícone, ou seja, não funciona quando as fontes da Web são bloqueadas (por exemplo, por largura de banda ou por motivos de segurança) ou substituídas por fontes personalizadas (por exemplo, devido a problemas de saúde, como dislexia etc.).
213206

22

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


+1 para espaçamento de palavras, embora -0,5 canais seja o valor certo, com -1ch de texto sem espaços não será legível, -0,5 canais se comporta exatamente como o tamanho da fonte: 0; com tamanho de conjunto explícito nos elementos de texto. :)
Dennis98

6
@ Dennis98, -1ch funciona apenas para fontes monoespaçadas (como Courier New), porque todos os seus caracteres têm a mesma largura, incluindo ' 'e '0'. Em fontes não monoespaçadas, não há proporção mágica totalmente adequada entre larguras ' 'e '0'caracteres, portanto, chnão ajuda muito.
Ilya Streltsyn

em vez de word-spacing, poderíamos usar letter-spacingcom um valor negativo grande arbitrária como mostrado na minha resposta
S.Serpooshan

20

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


16

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

13

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


0.25em não é o "espaçamento padrão das palavras", é a largura do caractere de espaço em branco na fonte Times New Roman que, por acaso, é a fonte padrão em alguns sistemas operacionais populares. Outras fontes populares como Helvetica costumam ter caracteres em branco mais amplos, portanto, remover apenas 0,25em delas seria insuficiente para se livrar das lacunas.
Ilya Streltsyn

12

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.


em vez de -4pxpara letter-spacingo que pode não ser suficiente para a grande font-tamanhos por exemplo: ver este violino , poderíamos usar um valor maior como no meu post
S.Serpooshan

12

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/


Embora tecnicamente não uma resposta para "Eu posso fazer isso com inline-block" isso parece-me ser uma solução elegante ...
Lucas

10

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.


9

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.


Uma desvantagem desse método é que precisamos saber e repetir o tamanho da fonte padrão (por exemplo, 14 px) para voltar ao normal em elementos filho!
precisa saber é o seguinte

8

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.


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
Embora esse trecho de código possa resolver a questão, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código. Por favor, tente também não sobrecarregar seu código com comentários explicativos, pois isso reduz a legibilidade do código e das explicações!
Ashish Ahuja

Eu acho que floate display:inline-blockpara spans deveriam ser substitutos para o caso, se flexnão for suportado, mas floatdescartariam efetivamente o efeito de inline-block, portanto o último parece redundante.
Ilya Streltsyn

6

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


No Firefox para Android, vejo um espaço de 1px entre as caixas.
Šime Vidas

5

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>


mesma coisa acontecendo aqui, você precisa definir letter-spacing:normaltodos os elementos filhos.
Gaurav Aggarwal

@GauravAggarwal, mas letter-spacingé 99,99% das vezes como normal. o tamanho da fonte não tem um valor fixo e depende muito do design. poderia ser um valor pequeno ou grande com base na família de fontes e outras coisas ... Eu nunca me lembro na minha vida de ver / usar um valor especial (diferente de 0 / normal) para letter-spacing, então eu acho que é mais seguro e melhor escolha
S.Serpooshan

Eu discordo disso ... usar o espaçamento entre letras para normal com todos os elementos e usar o tamanho da fonte também (se necessário) não é de todo útil, já que você está escrevendo código duplo onde você precisa alterar o tamanho da fonte. O uso do tamanho da fonte não gera código duplo e pode ser usado como tamanho padrão e em qualquer outro tamanho personalizado. Eu sugiro que você faça o google e verifique usando o tamanho da fonte é a coisa mais aceitável nos dias de hoje. A solução muda com o tempo :)
Gaurav Aggarwal

Eu não consigo entender o que você quer dizer com "... e usar o tamanho da fonte também (se necessário) não é de todo útil, já que você escreve código duplo onde é necessário alterar o tamanho da fonte". no meu post, não há configuração de tamanho de fonte! tudo o que fiz foi o espaçamento entre letras, que normalmente ninguém define em seu CSS (é sempre normal). ans como não mudarmos font-size, nós não precisamos saber font-size original para configurá-lo de volta
S.Serpooshan

Suponho que esse método não se tornou popular antes porque não funcionava no Opera / Presto. E atualmente temos outras opções que não precisam de tais soluções alternativas, por exemplo, usando o Flexbox em vez de blocos embutidos.
Ilya Streltsyn


3

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>


2

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.


4
Isso não funcionará se o usuário alterar o tamanho da fonte padrão do seu navegador. Melhor usar -0.25em.
Martin Schneider


1

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

span {
    display: table-cell;
}

esta pergunta é sobre bloqueio em linha.
Madan Bhandari 30/16

@MadanBhandari correto, mas parece remover a necessidade de todos os hacks sujos.
David

1

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 .


não funciona sem a bóia - que está faltando no seu desentupidor. Portanto, "espaço em branco: nowrap" nunca parece ser uma resposta funcional.
David

1

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:

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

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.


1

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>


1

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>


Apenas comentar para apontar o conteúdo de um display:gridelemento é bloqueado, por isso não é tão exibido: a grade o ajuda a trabalhar com layouts de bloco embutido, mas permite substituir o trabalho inline-blockpor algo em que você pode controlar as "calhas" como esta pergunta quer. Além disso, estou realmente surpreso que ninguém tenha respondido ainda com uma solução CSS Grid Layout antes de agora.
TylerH 14/10/19

Tornará mais claro que isso é uma mudança inline-block. E sim, fiquei surpresa também, acho que ninguém com gridexperiência realmente chegou a isso antes. Foram brincar com ele um pouco e me deparei com esta questão tão pensamento porque não: P
Stewartside

0

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

0

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>

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.