Bagaimana menghapus kesenjangan aneh antara tiga div yang memiliki warna latar yang sama?

23

Saya berjuang dengan masalah ini cukup lama sekarang. Masalahnya dapat dilihat pada perangkat seluler (Android dan iOS), beberapa perangkat mungkin perlu sedikit diperbesar. Di PC, saya juga dapat mereproduksi bug ini di browser Chrome saat beralih ke mode seluler. Di bawah ini adalah kode yang digunakan untuk mereproduksi 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>
Luaskan cuplikan

Hasil yang diharapkan adalah div yang dipenuhi dengan warna # 553213. Namun, pada beberapa perangkat seluler, mereka menampilkan garis tambahan (atau celah) di antara ketiga div tersebut.

Om iPhone saya

masukkan deskripsi gambar di sini

Di PC saya, menggunakan browser Chrome dengan mode seluler

masukkan deskripsi gambar di sini

Adakah yang tahu apa yang terjadi di sini? Setiap ide tentang bagaimana hal itu terjadi dan bagaimana cara memperbaikinya akan sangat dihargai.

html css Nguyen You
sumber
3
Mengapa Anda memiliki margin 0? Saya tidak dapat mereproduksi, mungkin mencoba mengatur margin ke -1px pada setiap div.
Madison Courto
3
Sama disini. Tidak dapat mereproduksi di PC. Mungkin masalah browser ponsel.
asprin
3
masalah peramban seluler mungkin
louie kim
3
Sepertinya ini adalah masalah dengan browser / sistem operasi / perangkat tertentu. Kemungkinan ini berarti bahwa Anda hanya dapat 'memperbaiki' ini dengan menggunakan peretasan. Atau sarankan pengembang peramban / sistem operasi / perangkat ini untuk memperbaiki bug.
Daan
2
Karena semua divs ini memiliki latar belakang yang sama, bisakah Anda tidak hanya meletakkan warna latar belakang pada elemen induk saja?
Moob

Jawaban:

6

Saya menemukan jawaban ini .

Jadi solusinya adalah menambahkan margin-top: -1px;untuk top, middle, dan bottomkelas.

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

Dan terlihat bagus di ponsel dan PC. The divs tinggi tidak berubah. Masih ada 300px.

Kicsi Vizilo
sumber
5

Saya kira ini karena skala halaman. Coba tambahkan tag meta ini ke kepala:

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

Alex
sumber
4

Setelah membaca komentar saya melihat bahwa Madison Courto punya saran

margin: -1px;

yang dikonfirmasi untuk menyelesaikan masalah aktual, tetapi telah menyebabkan masalah pada bagian lain halaman. Jadi, mari kita terapkan ide ini hanya untuk div yang sebenarnya:

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

Coba dengan background. Ini berfungsi dengan baik di ponsel saya:

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

Saya tidak tahu apa penyebab sebenarnya. tetapi ketika saya mencoba di bawah ini maka warna garis putih diubah menjadi hitam maka saya mendapat ide ini:

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

klik di atas atau bawah div

Ritesh Khandekar
sumber
2

Alasan untuk masalah ini mungkin karena cara display block,inline-block gaya ditangani oleh browser yang berbeda di layar yang berbeda.

misalnya, inline-blockelemen akan memiliki ruang kecil otomatis di sebelah kanan. orang biasanya menyelesaikan ini menggunakan negatif margin-left.

Secara default, a divadalah ablock elemen level.

Ruang bawah ini yang Anda hadapi juga bisa karena cara elemen tingkat blok ditangani.

Seperti memecahkan inline-blockruang dengan negatif margin-left,

blockruang level ini bisa diselesaikan menggunakan

  • negatif margin-topatau
  • mengubah divgaya menjadi table, table-cellketik atau flexboxketik menggunakan css
Ganeshkumar K
sumber
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>
Luaskan cuplikan

umair
sumber
1

tambahkan garis kecil untuk menyembunyikan masalah ini:

.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>
Luaskan cuplikan

Temani Afif
sumber
Tidak berfungsi
Nguyen You
@NguyenAnda bahkan jika Anda mencoba 1px?
Temani Afif
1
Ya! Namun, saya menemukan sesuatu yang sangat menarik ketika meningkatkan outline-width menjadi 35px. Banyak celah aneh muncul.
Nguyen You
1

Coba tambahkan margin-bottom ke divs atas dan tengah.

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

Semoga ini membantu.

Allabakash
sumber
1

Gunakan display dan margin bawah untuk memperbaiki gaya. 

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

Gunakan display dan margin bawah untuk memperbaiki gaya.

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

umair
sumber