¿Cómo eliminar brechas extrañas entre tres divs que tienen el mismo color de fondo?

23

Estoy luchando con este problema desde hace bastante tiempo. El problema se puede ver en dispositivos móviles (Android e iOS), algunos dispositivos pueden necesitar un poco de acercamiento. En la PC, también puedo reproducir este error en el navegador Chrome cuando cambio al modo móvil. A continuación se muestra el código que se utiliza para reproducir el error:

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

El resultado esperado sería un div que se cumple con el color # 553213. Sin embargo, en algunos dispositivos móviles, muestran líneas adicionales (o espacios) entre esos tres divs.

Om my iPhone

En mi PC, uso del navegador Chrome con modo móvil

¿Alguien sabe lo que está pasando aquí? Cualquier idea sobre cómo sucede y cómo solucionarlo sería muy apreciada.

html css

— Nguyen You
fuente

3

¿Por qué tienes margen 0? No puedo reproducir, quizás intente establecer el margen en -1px en cada div.

— Madison Courto

3

Igual que aquí. No se puede reproducir en una PC. Probablemente un problema del navegador del teléfono.

— asprin

3

problemas del navegador móvil probablemente

— louie kim

3

Parece que este es un problema con ciertos navegadores / sistemas operativos / dispositivos. Esto probablemente significa que solo puede 'arreglar' esto usando un truco. O sugiera a los desarrolladores de estos navegadores / sistemas operativos / dispositivos que solucionen el error.

— Daan

2

Dado que todos estos divs tienen el mismo fondo, ¿no podrías simplemente poner el color de fondo en el elemento padre?

— Moob

6

Encontré esta respuesta.

Así que la solución es añadir una margin-top: -1px;a top, middley bottomclases.

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

Y también se ve bien en dispositivos móviles y PC. La divaltura de s no cambia. Se queda 300px.

— Kicsi Viziló
fuente

5

Supongo que esto se debe a la escala de la página. Intenta agregar esta metaetiqueta a la cabeza:

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

— Alex
fuente

4

Después de leer los comentarios, he visto que Madison Courto tenía una sugerencia de

margin: -1px;

que se confirmó para resolver el problema real, pero ha causado problemas en otras partes de la página. Entonces, apliquemos esta idea solo para los divs reales:

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

3

Tratar con background. Esto funciona bien en mi móvil:

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

No sé cuál es la causa real. pero cuando probé a continuación, el color de las líneas blancas se convirtió en negro y luego tuve esta idea:

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

haga clic en div superior o inferior

— Ritesh Khandekar
fuente

2

La razón para este problema podría ser debido a la forma display block, inline-blockestilos siendo manejados por diferentes navegadores en diferentes pantallas.

por ejemplo, los inline-blockelementos tendrán un pequeño espacio automático a la derecha. La gente suele resolver esto usando negativo margin-left.

Por defecto, a dives un blockelemento de nivel.

Este espacio inferior al que te enfrentas también podría deberse a la forma en que se manejan los elementos de nivel de bloque.

Como resolver el inline-blockespacio con negativo margin-left,

este blockespacio de nivel puede resolverse usando

negativo margin-topo
cambiando divel estilo a cualquiera table, table-cellescriba o flexboxescriba usando css

— Ganeshkumar K
fuente

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 fragmento

— umair
fuente

1

agregue un pequeño esquema para ocultar este 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 fragmento

— Temani Afif
fuente

No funciona

— Nguyen You

@NguyenYou incluso si intentas 1px?

— Temani Afif

1

¡Sip! Sin embargo, encontré algo realmente interesante al aumentar el ancho del contorno a 35px. Aparecen un montón de brechas extrañas.

— Nguyen You

1

Solo intente agregar el margen inferior a los divisores superior y medio.

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

Espero que esto ayude.

— Allabakash
fuente

1

Use la pantalla y el margen inferior para arreglar el estilo.

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

— umair
fuente

1

Use la pantalla y el margen inferior para arreglar el 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 fragmento

— umair
fuente