Aynı arka plan rengine sahip üç div arasındaki garip boşluklar nasıl kaldırılır?

23

Bir süredir bu sorunla mücadele ediyorum. Sorun mobil cihazlarda (Android ve iOS) görülebilir, bazı cihazların biraz yakınlaştırılması gerekebilir. PC'de, mobil moda geçerken bu hatayı Chrome tarayıcıda da yeniden oluşturabilirim. Hatayı yeniden oluşturmak için kullanılan kod aşağıdadır:

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

Snippet'i genişlet

Beklenen sonuç # 553213 renkle yerine getirilen bir div olacaktır. Bununla birlikte, bazı mobil cihazlarda, bu üç div arasında ek satırlar (veya boşluklar) görüntüler.

Om benim iPhone'um

Bilgisayarımda mobil modlu Chrome tarayıcı kullanma

Burada neler olduğunu bilen var mı? Nasıl olduğu ve nasıl düzeltileceği hakkında herhangi bir fikir gerçekten takdir edilecektir.

html css

— Nguyen You
kaynak

3

Neden 0 marjınız var? Ben çoğaltılamıyorum, belki de her div üzerinde -1px kenar boşluğu ayarlamayı deneyin.

— Madison Courto

3

Burada aynı. PC'de çoğaltılamıyor. Muhtemelen bir telefon tarayıcısı sorunu.

— asprin

3

mobil tarayıcı sorunları

— louie kim

3

Bu, bazı tarayıcılar / işletim sistemleri / cihazlarla ilgili bir sorun gibi görünüyor. Bu muhtemelen bunu sadece bir kesmek kullanarak 'düzeltebileceğiniz' anlamına gelir. Ya da hatayı düzeltmek için bu tarayıcıların / işletim sistemlerinin / cihazların geliştiricilerine önerin.

— Daan

2

Tüm bu div'ler aynı arka plana sahip olduğundan, bunun yerine yalnızca arka plan rengini ana öğeye koyamazdınız mı?

— Moob

6

Bulduğum bu cevabı .

Solüsyon bir eklemektir Yani margin-top: -1px;için top, middleve bottomsınıflar.

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

Snippet'i genişlet

Mobil ve PC'de de iyi görünüyor. divS yüksekliği değişmez. Kalıyor 300px.

— Kicsi Viziló
kaynak

5

Sanırım bu, sayfanın ölçeğinden kaynaklanıyor. Bu meta etiketi kafaya eklemeyi deneyin:

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

— Alex
kaynak

4

Yorumları okuduktan sonra Madison Courto'nun

margin: -1px;

gerçek sorunu çözmek için onaylandı, ancak sayfanın diğer bölümlerinde sorunlara neden oldu. Bu fikri sadece gerçek div'ler için uygulayalım:

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

3

İle deneyin background. Cep telefonumda bu iyi çalışıyor:

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

Snippet'i genişlet

Gerçek nedenin ne olduğunu bilmiyorum. ama aşağıda denedikten sonra beyaz çizgilerin rengi siyaha dönüştü sonra bu fikri aldım:

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

Snippet'i genişlet

üst veya alt div'a tıklayın

— Ritesh Khandekar
kaynak

2

Bu sorunun nedeni, display block , inline-blockstillerin farklı tarayıcılar tarafından farklı ekranlarda ele alınma .

örneğin, inline-blocköğelerin sağ tarafında otomatik olarak küçük bir alan bulunur. insanlar genellikle bunu negatif kullanarak çözer margin-left.

Varsayılan olarak, divablock düzey öğesidir.

Karşılaştığınız bu alt boşluk, blok seviyesi elemanlarının ele alınış biçimi nedeniyle de olabilir.

Boşluğu inline-blocknegatif ile çözmek gibimargin-left ,

bu blockseviye alanı ya kullanarak çözülebilir

olumsuz margin-top veya
Değişen divbirine 'ın stil table, table-celltürü veya flexboxcss kullanarak yazın

— Ganeshkumar K
kaynak

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>

Snippet'i genişlet

— umair
kaynak

1

bu sorunu gizlemek için küçük bir taslak ekleyin :

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

Snippet'i genişlet

— Temani Afif
kaynak

İşe yaramıyor

— Nguyen

@ 1gx deneseniz bile?

— Temani Afif

1

Evet! Ancak, anahat genişliğini 35 piksele çıkarırken gerçekten ilginç bir şey buldum. Bir sürü tuhaf boşluk ortaya çıkıyor.

— Nguyen

1

Üst ve orta div değerlerine kenar boşluğu eklemeyi deneyin.

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

Snippet'i genişlet

Bu yardımcı olur umarım.

— Allabakash
kaynak

1

Stili düzeltmek için ekran ve kenar boşluğu altını kullanın.

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

— umair
kaynak

1

Stili düzeltmek için ekran ve kenar boşluğu altını kullanın.

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

Snippet'i genişlet

— umair
kaynak