Dois elementos de bloco em linha, cada um com 50% de largura, não cabem lado a lado em uma única linha

87

<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
}
</style>
</head>
<body>
    <div id="left">Left</div>
    <div id="right">Right</div>
</body>
</html>

JSFiddle: http://jsfiddle.net/5EcPK/

O código acima está tentando colocar a div # esquerda e a div # direita, lado a lado, em uma única linha. Mas como você pode ver na URL do JSFiddle acima, esse não é o caso.

Consigo resolver o problema reduzindo a largura de um dos divs para 49%. Veja http://jsfiddle.net/mUKSC/ . Mas esta não é uma solução ideal porque uma pequena lacuna aparece entre os dois divs.

Outra maneira de resolver o problema é flutuando os dois divs. Veja http://jsfiddle.net/VptQm/ . Isso funciona bem.

Mas minha pergunta original permanece. Por que, quando ambos os divs são mantidos como elementos de bloco embutido, eles não cabem lado a lado?

html css Lone Learner
fonte

Respostas:

136

Ao usar inline-blockelementos, sempre haverá um whitespace problema entre esses elementos (esse espaço tem cerca de 4 px de largura).

Então, seus dois divs, que têm 50% de largura, mais whitespace(~ 4px) têm mais de 100% de largura, e então quebram. Exemplo do seu problema:

Exibir trecho de código

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Expandir trecho

Existem algumas maneiras de corrigir isso:

1. Sem espaço entre esses elementos

Exibir trecho de código

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><div class="right">bar</div>

Expandir trecho

2. Usando comentários HTML

Exibir trecho de código

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><!--
--><div class="right">bar</div>

Expandir trecho

3. Defina os pais font-sizecomo 0e, em seguida, adicione algum valor aos inline-blockelementos

Exibir trecho de código

body{
  margin: 0; /* removing the default body margin */
}

.parent{
  font-size: 0;  /* parent value */
}

.parent > div{
  display: inline-block;
  width: 50%;
  font-size: 16px; /* some value */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="parent">
  <div class="left">foo</div>
  <div class="right">bar</div>
</div>

Expandir trecho

4. Usando uma margem negativa entre eles ( não preferível )

Exibir trecho de código

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
  margin-right: -4px; /* negative margin */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Expandir trecho

5. Abaixando o ângulo de fechamento

Exibir trecho de código

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div
><div class="right">bar</div>

<hr>

<div class="left">foo</div><div class="right">
bar</div>

Expandir trecho

6. Ignorando certas tags de fechamento HTML (obrigado @thirtydot pela referência )

Exibir trecho de código

body{
  margin: 0; /* removing the default body margin */
}

ul{
  margin: 0; /* removing the default ul margin */
  padding: 0; /* removing the default ul padding */
}

li{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<ul>
  <li class="left">foo
  <li class="right">bar
</ul>

Expandir trecho

Referências:

Como disse @MarcosPérezGude , a melhor forma é usar e adicionar algum valor padrão na tag (como no HTML5Boilerplate ). Exemplo:remfont-sizehtml

html{
    font-size: 1em;
}

.ib-parent{             /* ib -> inline-block */
    font-size: 0;
}

.ib-child{
    display: inline-block;
    font-size: 1rem;
}

Atualização : como é quase 2018., use flexbox ou ainda melhor - layout de grade CSS .

Vucko
fonte

3

@hoosierEE isso não é absurdo. O espaço entre os elementos é bom, porque os elementos do bloco embutido serão posicionados na linha do texto. Se você colocar um espaço em uma linha, haverá um espaço. Portanto, o comportamento é o correto, mesmo se você achar que isso é um problema (como Vucko chama de errado).

Marcos Pérez Gude

2

Concordo com @MarcosPérezGude, esse comportamento está correto. Como você pode ver na minha postagem, existem algumas maneiras de remover esse espaço em branco (eu mesmo uso comentários HTML para remover o espaço em branco). Mas se você mente que espaço em branco, você sempre pode usar flexbox, table/table-row/table-cellou o uso float.

Vucko,

2

Eu uso blocos embutidos perfeitamente. Minha abordagem normal é parent { font-size:0; } child {font-size: 1rem; }. Com rems agora é mais fácil

Marcos Pérez Gude

é um pouco irritante que as guias ainda sejam analisadas como espaços. Eu nunca vi isso abandonar a correção da tag de fechamento antes, isso tem alguma instabilidade ou efeitos colaterais?

MintWelsh

Verifique também se borderestá desligado. Isso pode adicionar espaço se você estiver flutuando os divs.

evolross

22

boa resposta em css3 é:

white-space: nowrap;

no nó pai e:

white-space: normal;
vertical-align: top;

em div (ou outro) em 50%

exemplo: http://jsfiddle.net/YpTMh/19/

EDITAR:

existe outra maneira com:

font-size: 0;

para o nó pai e substituí-lo no nó filho

Matriz
fonte

7

É porque o espaço em branco entre seus dois divs está sendo interpretado como um espaço. Se você colocar suas <div>tags em linha conforme mostrado abaixo, o problema será corrigido :

<div id="left"></div><div id="right"></div>

Dan
fonte

4

Porque existe um espaço entre os elementos. Se você remover todos os espaços em branco, eles se encaixarão .

<div id="left">Left</div><div id="right">Right</div>

Michiel van Oosterhout
fonte

4

Faça-os bloquear em vez de bloquear em linha. Isso fará com que os divs ignorem os espaços entre eles.

display:block;

ou remova o espaço entre as tags

<div id='left'></div><div id='right'></div>

ou adicionar

margin: -1en;

para um dos divs para reduzir o espaço ocupado por um único espaço renderizado.

Vittore
fonte

2

Verifique o código abaixo:

body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
    float:left;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
    float:left;
}

<div id="left">Left</div>
<div id="right">Right</div>

Expandir trecho

Vaneet Thakur
fonte

2

Exemplo de Flexbox - isso seria usado para a classe pai que contém os dois elementos lado a lado.

.parentclass {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Tirado da centralização vertical de um div dentro de outro div

nbixler
fonte

1

Isso pode ser feito adicionando css display: inline ao div que contém os elementos inline.

Ao remover o espaço em branco usando margem com valor negativo, torna-se necessário adicioná-lo a este elemento específico. Como adicioná-lo a uma classe afetará os locais onde essa classe foi usada.

Portanto, seria mais seguro usar display: inline;

Vish
fonte

0

add float: left; para ambas as tags div.

div {
  float: left;
}

Expandir trecho

Tatenda
fonte