Como remover espaços estranhos entre três divs com a mesma cor de fundo?

23

Estou lutando com esse problema há um bom tempo agora. O problema pode ser visto em dispositivos móveis (Android e iOS); alguns dispositivos podem precisar ser ampliados um pouco. No PC, também posso reproduzir esse bug no navegador Chrome ao mudar para o modo móvel. Abaixo está o código usado para reproduzir o bug:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .top {
      height: 100px;
      background-color: #553213;
    }
    .middle {
      height: 100px;
      background-color: #553213;
    }
    .bottom {
      height: 100px;
      background-color: #553213;
    }
  </style>
</head>
<body>
  <div style="width:300px; height: 300px">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>

Expandir snippet

O resultado esperado seria uma div que é cumprida com a cor # 553213. No entanto, em alguns dispositivos móveis, eles exibem linhas (ou intervalos) adicionais entre essas três divs.

Om meu iPhone

No meu PC, usando o navegador Chrome com o modo móvel

Alguém sabe o que está acontecendo aqui? Qualquer idéia sobre como isso acontece e como corrigi-lo seria realmente apreciada.

html css

— Nguyen You
fonte

3

Por que você tem margem 0? Não consigo reproduzir, talvez tente definir a margem como -1px em cada div.

— Madison Courto 18/12/19

3

O mesmo aqui. Não é possível reproduzir em um PC. Provavelmente um problema no navegador do telefone.

— Asprin

3

problemas com navegadores móveis provavelmente

— louie kim

3

Parece que este é um problema com determinados navegadores / sistemas operacionais / dispositivos. Isso provavelmente significa que você só pode 'consertar' isso usando um hack. Ou sugira aos desenvolvedores desses navegadores / sistemas operacionais / dispositivos para corrigir o erro.

— Daan

2

Como todas essas divs têm o mesmo plano de fundo, você não pode simplesmente colocar a cor de plano de fundo no elemento pai?

— Moob

6

Encontrei esta resposta.

Portanto, a solução é adicionar um margin-top: -1px;a top, middlee bottomclasses.

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .top {
      height: 100px;
      background-color: #553213;
    }
    .middle {
      height: 100px;
      background-color: #553213;
    }
    .bottom {
      height: 100px;
      background-color: #553213;
    }
    
    .top, .middle, .bottom {
      margin-top: -1px;
    }

  </style>
</head>
<body>
  <div style="width:300px; height: 300px;">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>

Expandir snippet

E parece bom no celular e no PC também. A divaltura não muda. Permanece 300px.

— Kicsi Viziló
fonte

5

Acho que isso se deve à escala da página. Tente adicionar esta metatag na cabeça:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

— Alex
fonte

4

Depois de ler os comentários, vi que Madison Courto tinha uma sugestão de

margin: -1px;

que foi confirmado para resolver o problema real, mas causou problemas em outras partes da página. Então, vamos aplicar essa ideia apenas para as divs reais:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .top {
      height: 100px;
      background-color: #553213;
    }
    .middle {
      height: 100px;
      background-color: #553213;
    }
    .bottom {
      height: 100px;
      background-color: #553213;
    }
  </style>
</head>
<body>
  <div style="width:300px; height: 300px">
    <div class="top" style="margin: -1px;"></div>
    <div class="middle" style="margin: -1px;"></div>
    <div class="bottom" style="margin: -1px;"></div>
  </div>
</body>
</html>

— Lajos Arpad
fonte

3

Tente com background. Isso funciona bem no meu celular:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .top {
      height: 100px;
    }
    .middle {
      height: 100px;
      }
    .bottom {
      height: 100px;
      }
    div{
      background:#553213;
    }
  </style>
</head>
<body>
  <div style="width:300px; height: 300px">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>

Expandir snippet

Não sei qual é a causa real. mas quando tentei abaixo a cor das linhas brancas convertidas em preto, tive a seguinte ideia:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .top {
      height: 100px;
      background-color: #553213;
    }
    .middle {
      height: 100px;
      background-color: #553213;
    }
    .bottom {
      height: 100px;
      background-color: #553213;
    }
    div:hover{background:#000;}
  </style>
</head>
<body>
  <div style="width:300px; height: 300px">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>

Expandir snippet

clique na div superior ou inferior

— Ritesh Khandekar
fonte

2

A razão para este problema pode ser devido à forma como display block, inline-blockestilos sendo manipulados por diferentes navegadores em diferentes telas.

por exemplo, os inline-blockelementos terão um pequeno espaço automático à direita. as pessoas geralmente resolvem isso usando negativo margin-left.

Por padrão, a divé um blockelemento de nível.

Esse espaço inferior que você estava enfrentando também pode ser devido à maneira como os elementos do nível do bloco estão sendo manipulados.

Como resolver o inline-blockespaço com negativo margin-left,

este blockespaço nivelado pode ser resolvido usando

negativo margin-topou
mudando divo estilo para table, table-celldigite ou flexboxdigite usando css

— Ganeshkumar K
fonte

2

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .top,
        .middle,
        .bottom {
            min-height: 100px;
            width: 100%;
            background-color: #553213;
            margin-bottom: -6px;
            display: inline-block;
            padding: 15px 0;
        }
    </style>
</head>

<body>
    <div style="width:300px; height: 300px">
        <div class="top"></div>
        <div class="middle"></div>
        <div class="bottom"></div>
    </div>
</body>

</html>

Expandir snippet

— umair
fonte

1

adicione um pequeno esboço para ocultar esse problema:

.container > * {
  height: 100px;
  background-color: #553213;
  outline:1px solid #553213;
}

.container {
  width:300px;
  height:300px;
}

<div  class="container">
  <div class="top"></div>
  <div class="middle"></div>
  <div class="bottom"></div>
</div>

Expandir snippet

— Temani Afif
fonte

Isso não funciona #

— 9339 Nguyen You

@NguyenYou mesmo se você tentar 1px?

— Temani Afif 18/12/19

11

Sim! No entanto, achei algo realmente interessante ao aumentar a largura do contorno para 35px. Um monte de lacunas estranhas aparecem.

— Nguyen Você

1

Apenas tente adicionar a margem inferior às divs superior e média.

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .top {
      height: 100px;
      background-color: #553213;
	  margin-bottom: -2px;
    }
    .middle {
      height: 100px;
      background-color: #553213;
	  margin-bottom: -2px;
    }
    .bottom {
      height: 100px;
      background-color: #553213;
    }
  </style>
</head>
<body>
  <div style="width:300px; height: 300px">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>

Expandir snippet

Espero que isto ajude.

— Allabakash
fonte

1

Use a tela e a margem inferior para corrigir o estilo.

.top, .middle, .bottom {
    height: 100px;
    background-color: #553213;
    margin-bottom: 5px;
    display: block;
}

— umair
fonte

1

Use a tela e a margem inferior para corrigir o estilo.

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
  .top, .middle, .bottom {
    height: 100px;
    background-color: #553213;
    margin-bottom: 5px;
    display: block;
}
  </style>
</head>
<body>
  <div style="width:300px; height: 300px">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>

Expandir snippet

— umair
fonte