Come rimuovere strani spazi vuoti tra tre div con lo stesso colore di sfondo?

23

Sto lottando con questo problema da un po 'di tempo ormai. Il problema può essere riscontrato su dispositivi mobili (Android e iOS), potrebbe essere necessario ingrandire leggermente alcuni dispositivi. Su PC, posso anche riprodurre questo bug sul browser Chrome quando si passa alla modalità mobile. Di seguito è riportato il codice che utilizza per riprodurre il 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>

Espandi frammento

Il risultato atteso sarebbe un div che viene soddisfatto con il colore # 553213. Tuttavia, su alcuni dispositivi mobili, visualizzano linee aggiuntive (o spazi) tra queste tre div.

Om il mio iPhone

Sul mio PC, utilizzando il browser Chrome con modalità mobile

Qualcuno sa cosa sta succedendo qui? Qualsiasi idea su come accada e su come risolverlo sarebbe davvero apprezzata.

html css

— Nguyen You
fonte

3

Perché hai un margine 0? Non riesco a riprodurre, forse prova a impostare il margine su -1px su ogni div.

— Madison Courto,

3

Anch'io. Impossibile riprodurre su un PC. Probabilmente un problema con il browser del telefono.

— Asprin,

3

problemi del browser mobile probabilmente

— louie kim

3

Sembra che questo sia un problema con determinati browser / sistemi operativi / dispositivi. Questo probabilmente significa che puoi 'risolvere' solo usando un hack. Oppure suggerisci agli sviluppatori di questi browser / sistemi operativi / dispositivi di correggere il bug.

— Daan,

2

Dato che tutti questi div hanno lo stesso sfondo, non potresti semplicemente mettere il colore di sfondo sull'elemento genitore?

— Moob,

6

Ho trovato questa risposta

Quindi la soluzione è quella di aggiungere un margin-top: -1px;a top, middlee bottomle classi.

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

Espandi frammento

E sembra buono anche su cellulare e PC. L' divaltezza della s non cambia. Rimane 300px.

— Kicsi Viziló
fonte

5

Immagino che ciò sia dovuto alla scala della pagina. Prova ad aggiungere questo meta tag alla testa:

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

— alex
fonte

4

Dopo aver letto i commenti, ho visto che Madison Courto aveva un suggerimento

margin: -1px;

che è stato confermato per risolvere il problema reale, ma ha causato problemi in altre parti della pagina. Quindi, applichiamo questa idea solo ai div effettivi:

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

Prova con background. Funziona bene sul mio cellulare:

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

Espandi frammento

Non so quale sia la vera causa. ma quando ho provato di seguito il colore delle linee bianche convertito in nero ho avuto questa 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>

Espandi frammento

fare clic su div superiore o inferiore

— Ritesh Khandekar
fonte

2

Il motivo di questo problema potrebbe essere dovuto al modo display block , inline-blockstili affidate a diversi browser su schermi diversi.

per esempio, inline-block elementi avranno un piccolo spazio automatico a destra. la gente di solito risolve questo usando il negativo margin-left.

Per impostazione predefinita, a div è un blockelemento di livello.

Lo spazio inferiore che hai dovuto affrontare potrebbe anche essere dovuto al modo in cui vengono gestiti gli elementi a livello di blocco.

Come risolvere inline-block spazio con negativo margin-left,

Questo block spazio di livello può essere risolto usando

negativo margin-top o
cambiando lo divstile in table, table-celldigitare o flexboxdigitare 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>

Espandi frammento

— UMAir
fonte

1

aggiungi un piccolo contorno per nascondere questo 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>

Espandi frammento

— Temani Afif
fonte

Non funziona

— Nguyen You, il

@NguyenYou anche se provi 1px?

— Temani Afif il

1

Sì! Tuttavia, ho trovato qualcosa di veramente interessante aumentando la larghezza del contorno a 35px. Appaiono un sacco di strani spazi vuoti.

— Nguyen, il

1

Prova ad aggiungere il margine inferiore ai div superiori e medi.

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

Espandi frammento

Spero che sia di aiuto.

— Allabakash
fonte

1

Usa il display e il margine inferiore per correggere lo stile.

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

— UMAir
fonte

1

Usa il display e il margine inferiore per correggere lo stile.

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

Espandi frammento

— UMAir
fonte