0

Eu quero colocar as 3 divs na mesma linha com width: 33.3333%, mas está aparecendo um espaço entre elas. Note na imagem que o padding, margin e borda estão zerados, e eu declarei box-sizing:border-box no reset.

Análise de código fonte no Chrome para desenvolvedor

html, body, div, span, applet, object, iframe,
            h1, h2, h3, h4, h5, h6, p, blockquote, pre,
            a, abbr, acronym, address, big, cite, code,
            del, dfn, em, img, ins, kbd, q, s, samp,
            small, strike, strong, sub, sup, tt, var,
            b, u, i, center,
            dl, dt, dd, ol, ul, li,
            fieldset, form, label, legend,
            table, caption, tbody, tfoot, thead, tr, th, td,
            article, aside, canvas, details, embed, 
            figure, figcaption, footer, header, hgroup, 
            menu, nav, output, ruby, section, summary,
            time, mark, audio, video {
                    margin: 0;
                    padding: 0;
                    border: 0;
                    font-size: 100%;
                    font: inherit;
                    vertical-align: baseline;
                    box-sizing: border-box;
            }

Não sei de onde saiu essa barda se o próprio navegador não diz nada pelo inspetor de elementos. Alguém sabe como posso remover isso?

3 Respostas 3

1

Olha, como já dito display inline-block possui um espaçamento que mesmo zerando todas a margens ainda assim continua com espaços.

Como eu posso resolver isso com os elementos ainda sendo inline-block? Simples. só zerar o font-size: 0 do elemento pai. faz sentido? não sei mas assim resolve, segue exemplo:

*{
  box-sizing:border-box
}

nav{
  font-size: 0;
}

nav a {
  display: inline-block;
  background: #ddd;
  padding: 10px;
  font-size: 15px;
  width: 33.333%;
  border: 1px solid #333;
}
<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>

No meu exemplo o elemento pai é a tag nav, porém existe outra forma de resolver isso, olhe o exemplo:

*{
  box-sizing:border-box
}

nav a {
  display: inline-block;
  background: #ddd;
  padding: 10px;
  font-size: 15px;
  width: 33.333%;
  border: 1px solid #333;
}
<nav>
  <a href="#">One</a
  ><a href="#">Two</a
  ><a href="#">Three</a>
</nav>

Observe que agora não zerei o font-size do elemento pai, mas o carácter > do fechamento de cada tag pulei e logo já iniciei a próxima tag...

o que aconteceu foi deixar praticamente tudo na mesma linha, e observando essa comportamento fica claro que aquele espaço nos elementos inline-block é causado pela quebra de linha no código, não faz sentido mas beleza

2
  • Achei que já tinha visto de tudo, aí vem você com essa. Ou melhor "essas". As duas soluções não tem nenhum sentido! Mas se funciona é isso que vale. Valeu pela dica. Agora, acho que nunca mais vou sofrer pra colocar os elementos na mesma linha. Grande abraço!
    – Mr Genesis
    8/08/2017 às 20:11
  • não faz mesmo kk só de vc pular a linha no código visualmente fica com aquele espaço do demonio, felizmente tem como resolver 9/08/2017 às 19:20
1

Elementos inline-block por padrão possuem espaços, isso é algum tipo convenção, não sei ao certo, para remover esses espaços basta setar uma margin negativa, exemplo

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
  margin-right: -4px;
}
<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>

A propósito, sua solução é a melhor possível, display flex, ou melhor flexbox é para mim o melhor jeito de comportar os elementos no layout, segue o guia completo Flexbox css tricks

1
  • Eu havia esquecido dessa regra que o inline-blok adicionava uma margin de 4px a direita. \0/ Só lembrei agora depois que eu li sua resposta. Mas de qualquer forma, acho que vou ficar mesmo com o display flex porque é mais fácil. Valeu!!!
    – Mr Genesis
    6/08/2017 às 0:02
0

Eu coloquei display:flex; na div pai e resolveu meu problema. Valeu! Mas se mesmo assim algem puder me explicar esse questão vai ser bom saber. Isso me deixou com "uma pulga atrás da orelha". Penso que as div deveriam ficar uma ao lado da outra uma vez que eu zerei tudo e pedi display:inline-block; e width:33.3333%;.display:flex; CSS

3
  • Essa é a solução ou uma nova duvida?
    – user28595
    5/08/2017 às 15:28
  • Eu acredito que essa seja a solução não seja a solução ideal. Mas se alguém pudesse me dizer porque estava aparecendo uma borda, eu gostaria muito de saber.
    – Mr Genesis
    5/08/2017 às 15:35
  • Acho que tem a ver com essa pergunta, mas não tenho certeza por que está usando o Chrome, no firefox fica mais fácil de identificar isso 5/08/2017 às 15:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .