Làm cách nào để loại bỏ những khoảng trống kỳ lạ giữa ba div có cùng màu nền?

23

Tôi đang vật lộn với vấn đề này khá lâu rồi. Vấn đề có thể được nhìn thấy trên các thiết bị di động (Android và iOS), một số thiết bị có thể cần phải phóng to một chút. Trên PC, tôi cũng có thể tái tạo lỗi này trên trình duyệt Chrome khi chuyển sang chế độ di động. Dưới đây là mã sử dụng để tái tạo lỗi:

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

Mở rộng đoạn trích

Kết quả dự kiến sẽ là một div được hoàn thành với màu # 553213. Tuy nhiên, trên một số thiết bị di động, chúng hiển thị các dòng (hoặc khoảng trống) bổ sung giữa ba div đó.

Ôi iPhone của tôi

Trên PC của tôi, sử dụng trình duyệt Chrome với chế độ di động

Có ai biết chuyện gì đang xảy ra ở đây không? Bất kỳ ý tưởng nào về cách nó xảy ra và cách khắc phục nó sẽ thực sự được đánh giá cao.

html css

— Nguyễn Bạn
nguồn

3

Tại sao bạn có ký quỹ 0? Tôi không thể sao chép, có lẽ thử đặt lề thành -1px trên mỗi div.

— Madison Courto

3

Tương tự ở đây. Không thể sao chép trên PC. Có lẽ là một vấn đề trình duyệt điện thoại.

— asprin

3

vấn đề trình duyệt di động có lẽ

— louie kim

3

Có vẻ như đây là một vấn đề với một số trình duyệt / hệ điều hành / thiết bị nhất định. Điều này có thể có nghĩa là bạn chỉ có thể 'khắc phục' điều này bằng cách sử dụng hack. Hoặc đề nghị các nhà phát triển của các trình duyệt / hệ điều hành / thiết bị này khắc phục lỗi.

— Daan

2

Vì tất cả các div này có cùng một nền, bạn có thể không đặt màu nền cho phần tử cha không?

— Moob

6

Tôi tìm thấy câu trả lời này .

Vì vậy, giải pháp là để thêm một margin-top: -1px;đến top, middlevà bottomcác lớp học.

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

Mở rộng đoạn trích

Và nó cũng có vẻ tốt trên thiết bị di động và PC. Các divs chiều cao không thay đổi. Nó vẫn còn 300px.

— Kicsi Viziló
nguồn

5

Tôi đoán điều này là do quy mô của trang. Hãy thử thêm thẻ meta này vào đầu:

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

— Alex
nguồn

4

Sau khi đọc các bình luận tôi đã thấy rằng Madison Courto đã có một gợi ý về

margin: -1px;

đã được xác nhận để giải quyết vấn đề thực tế, nhưng nó đã gây ra vấn đề trên các phần khác của trang. Vì vậy, hãy áp dụng ý tưởng này cho các div thực tế:

<!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
nguồn

3

Hãy thử với background. Điều này hoạt động tốt trong điện thoại di động của tôi:

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

Mở rộng đoạn trích

Tôi không biết nguyên nhân thực sự là gì. Nhưng khi tôi thử dưới đây, màu của các dòng trắng chuyển thành màu đen thì tôi đã có ý tưởng này:

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

Mở rộng đoạn trích

nhấp vào div trên cùng hoặc dưới cùng

— Ritesh Khandekar
nguồn

2

Lý do cho vấn đề này có thể là do cách thức display block, inline-blockkiểu được xử lý bởi các trình duyệt khác nhau trên các màn hình khác nhau.

ví dụ, inline-blockcác phần tử sẽ có một không gian nhỏ tự động ở bên phải. mọi người thường giải quyết điều này bằng cách sử dụng tiêu cực margin-left.

Theo mặc định, a divlà một blockyếu tố cấp độ.

Không gian dưới cùng mà bạn phải đối mặt cũng có thể là do cách xử lý các yếu tố cấp khối.

Giống như giải quyết inline-blockkhông gian với tiêu cực margin-left,

blockkhông gian mức này có thể được giải quyết bằng cách sử dụng

tiêu cực margin-tophoặc
thay đổi divkiểu thành một table, table-cellloại hoặc flexboxloại bằng css

— Ganeshkumar K
nguồn

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>

Mở rộng đoạn trích

— ô
nguồn

1

thêm một phác thảo nhỏ để che giấu vấn đề này:

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

Mở rộng đoạn trích

— Temani Afif
nguồn

Nó không hoạt động

— Nguyen You

@NguyenYou ngay cả khi bạn thử 1px?

— Temani Afif

1

Vâng Tuy nhiên, tôi đã tìm thấy một cái gì đó thực sự thú vị khi tăng chiều rộng phác thảo lên 35px. Một loạt các khoảng trống kỳ lạ xuất hiện.

— Nguyễn Bạn

1

Chỉ cần thử thêm lề dưới vào div trên cùng và giữa.

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

Mở rộng đoạn trích

Hi vọng điêu nay co ich.

— Allabakash
nguồn

1

Sử dụng màn hình và lề dưới để sửa kiểu dáng.

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

— ô
nguồn

1

Sử dụng màn hình và lề dưới để sửa kiểu dáng.

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

Mở rộng đoạn trích

— ô
nguồn