วิธีลบช่องว่างแปลก ๆ ระหว่างสาม divs ที่มีสีพื้นหลังเหมือนกันได้อย่างไร

23

ฉันกำลังดิ้นรนกับปัญหานี้มาระยะหนึ่งแล้ว ปัญหานี้สามารถเห็นได้บนอุปกรณ์พกพา (Android และ iOS) อุปกรณ์บางอย่างอาจต้องมีการซูมเข้าเล็กน้อย บนพีซีฉันสามารถสร้างข้อผิดพลาดนี้ซ้ำบนเบราว์เซอร์ Chrome เมื่อสลับไปยังโหมดมือถือ ด้านล่างเป็นรหัสที่ใช้สร้างข้อผิดพลาดซ้ำ:

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

ขยายตัวอย่างข้อมูล

ผลลัพธ์ที่คาดหวังจะเป็น div ซึ่งเติมเต็มด้วยสี # 553213 อย่างไรก็ตามในอุปกรณ์มือถือบางรุ่นพวกเขาจะแสดงบรรทัดเพิ่มเติม (หรือช่องว่าง) ระหว่างสาม divs

อ้อม iPhone ของฉัน

บนพีซีของฉันโดยใช้เบราว์เซอร์ Chrome พร้อมโหมดมือถือ

ไม่มีใครรู้ว่าเกิดอะไรขึ้นที่นี่ ความคิดเห็นใด ๆ เกี่ยวกับมันเกิดขึ้นได้อย่างไรและจะแก้ไขอย่างไรจะได้รับการชื่นชมอย่างแท้จริง

html css

— เหงียนคุณ
แหล่งที่มา

3

ทำไมคุณถึงมีอัตรากำไรขั้นต้น 0 ฉันทำซ้ำไม่ได้อาจลองตั้งค่าระยะขอบเป็น -1px ในแต่ละ div

— Madison Courto

3

กันที่นี่ ไม่สามารถทำซ้ำบนพีซี อาจเป็นปัญหาเบราว์เซอร์โทรศัพท์

— เมษายน

3

อาจมีปัญหาเกี่ยวกับเบราว์เซอร์มือถือ

— louie kim

3

ดูเหมือนว่านี่เป็นปัญหากับเบราว์เซอร์ / ระบบปฏิบัติการ / อุปกรณ์บางอย่าง นี่อาจหมายความว่าคุณสามารถ 'แก้ไข' สิ่งนี้ได้โดยใช้แฮ็คเท่านั้น หรือแนะนำผู้พัฒนาเบราว์เซอร์ / ระบบปฏิบัติการ / อุปกรณ์เหล่านี้เพื่อแก้ไขข้อผิดพลาด

— Daan

2

เนื่องจาก div ทั้งหมดเหล่านี้มีพื้นหลังเดียวกันคุณไม่สามารถใส่สีพื้นหลังบนองค์ประกอบหลักแทนได้หรือไม่

— Moob

6

ฉันพบนี้คำตอบ

ดังนั้นการแก้ปัญหาคือการเพิ่มmargin-top: -1px;การtop, middleและbottomชั้นเรียน

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

ขยายตัวอย่างข้อมูล

และมันก็ดูดีบนมือถือและพีซีด้วย divความสูงไม่เปลี่ยนแปลง 300pxมันยังคงอยู่

— Kicsi Viziló
แหล่งที่มา

5

ฉันเดาว่านี่เป็นเพราะขนาดของหน้าเว็บ ลองเพิ่มเมตาแท็กนี้ไปที่ส่วนหัว:

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

— อเล็กซ์
แหล่งที่มา

4

หลังจากอ่านความคิดเห็นฉันได้เห็นว่า Madison Courto มีข้อเสนอแนะ

margin: -1px;

ซึ่งได้รับการยืนยันสำหรับการแก้ไขปัญหาจริง แต่เกิดจากปัญหาในส่วนอื่น ๆ ของหน้า ดังนั้นเราจะใช้แนวคิดนี้กับ div ที่แท้จริงเท่านั้น:

<!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
แหล่งที่มา

3

backgroundลองกับ สิ่งนี้ทำงานได้ดีในมือถือของฉัน:

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

ขยายตัวอย่างข้อมูล

ฉันไม่รู้ว่าอะไรคือสาเหตุที่แท้จริง แต่เมื่อฉันลองด้านล่างสีของเส้นสีขาวแปลงเป็นสีดำแล้วฉันได้ความคิดนี้:

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

ขยายตัวอย่างข้อมูล

คลิกที่ div ด้านบนหรือล่าง

— Ritesh Khandekar
แหล่งที่มา

2

เหตุผลสำหรับเรื่องนี้อาจจะเป็นเพราะวิธีการdisplay block, inline-blockรูปแบบการจัดการที่แตกต่างกันโดยเบราว์เซอร์บนหน้าจอที่แตกต่างกัน

ตัวอย่างเช่นinline-blockองค์ประกอบจะมีพื้นที่ขนาดเล็กอัตโนมัติทางด้านขวา คน usally margin-leftแก้ปัญหานี้โดยใช้เชิงลบ

โดยค่าเริ่มต้นdivคือblockองค์ประกอบระดับ

ช่องว่างด้านล่างนี้ที่คุณเผชิญอาจเป็นเพราะองค์ประกอบของการจัดการองค์ประกอบระดับบล็อก

ชอบแก้inline-blockพื้นที่กับลบmargin-left ,

blockพื้นที่ระดับนี้สามารถแก้ไขได้โดยใช้

เชิงลบ margin-topหรือ
การเปลี่ยนแปลงdivของรูปแบบการอย่างใดอย่างหนึ่งtable, table-cellพิมพ์หรือflexboxพิมพ์โดยใช้ CSS

— Ganeshkumar K
แหล่งที่มา

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>

ขยายตัวอย่างข้อมูล

— Umair
แหล่งที่มา

1

เพิ่มโครงร่างเล็ก ๆ เพื่อซ่อนปัญหานี้:

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

ขยายตัวอย่างข้อมูล

— Temani Afif
แหล่งที่มา

มันไม่ทำงาน

— เหงียนคุณ

@ เหงียนคุณแม้ว่าคุณจะลอง 1px?

— Temani Afif

1

ได้! อย่างไรก็ตามฉันพบสิ่งที่น่าสนใจจริง ๆ เมื่อเพิ่มความกว้างเค้าร่างเป็น 35px มีช่องว่างแปลก ๆ ปรากฏขึ้น

— เหงียนคุณ

1

เพียงลองเพิ่มระยะขอบด้านล่างลงใน div ด้านบนและกลาง

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

ขยายตัวอย่างข้อมูล

หวังว่านี่จะช่วยได้

— Allabakash
แหล่งที่มา

1

ใช้จอแสดงผลและขอบด้านล่างเพื่อแก้ไขสไตล์

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

— Umair
แหล่งที่มา

1

ใช้จอแสดงผลและขอบด้านล่างเพื่อแก้ไขสไตล์

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

ขยายตัวอย่างข้อมูล

— Umair
แหล่งที่มา