Як усунути дивні прогалини між трьома дивами, що мають однаковий колір фону?

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>

Розгорніть фрагмент

Очікуваним результатом буде діва, яка виконана кольором # 553213. Однак на деяких мобільних пристроях вони відображають додаткові рядки (або проміжки) між цими трьома дивами.

Ой мій iPhone

На моєму ПК за допомогою браузера Chrome у мобільному режимі

Хтось знає, що тут відбувається? Будь-які ідеї про те, як це відбувається і як це виправити, були б дуже вдячні.

html css

— Nguyen You
джерело

3

Чому у вас є маржа 0? Я не можу відтворити, можливо, спробуйте встановити поле на -1px для кожного діла.

— Медісон Курто

3

Те ж саме. Неможливо відтворити на ПК. Можливо, проблема з браузером телефону.

— asprin

3

Можливо, проблеми з браузером для мобільних пристроїв

— louie kim

3

Схоже, це проблема з певними браузерами / операційними системами / пристроями. Це, ймовірно, означає, що ви можете «виправити» це лише за допомогою хакера. Або запропонуйте розробникам цих браузерів / операційних систем / пристроїв виправити помилку.

— Даан

2

Оскільки всі ці диви мають однаковий фон, чи не могли ви просто накласти колір фону на батьківський елемент?

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

Розгорніть фрагмент

І це добре виглядає і на мобільних, і на ПК. Висота divs не змінюється. Залишається 300px.

— Kicsi Viziló
джерело

5

Я думаю, це пов’язано з масштабом сторінки. Спробуйте додати цей метатег до голови:

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

— Олексій
джерело

4

Прочитавши коментарі, я побачив, що Медісон Курто мала пропозицію

margin: -1px;

що було підтверджено для вирішення фактичного питання, але воно спричинило проблеми в інших частинах сторінки. Отже, давайте застосуємо цю ідею лише до власних дівок:

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

— Лайош Арпад
джерело

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>

Розгорніть фрагмент

натисніть на верхній або нижній розділ

— Рітеш Хандекар
джерело

2

Причина цієї проблеми може бути пов'язана з тим , як display block, inline-blockстилі бути оброблені різними браузерами на різних екранах.

наприклад, inline-blockелементи матимуть автоматичний невеликий простір праворуч. люди звичайно вирішують це за допомогою негативу margin-left.

За замовчуванням a div- це blockрівень рівня.

Цей нижній простір, з яким ви стикалися, також може бути через спосіб обробки елементів рівня блоку.

Як вирішення inline-blockпростору з негативом margin-left,

цей blockрівень простору можна вирішити, використовуючи

негативний margin-topабо
зміна divстилю на будь-який table, table-cellтип або flexboxтип за допомогою css

— Ганешкумар К
джерело

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>

Розгорніть фрагмент

— умаір
джерело

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>

Розгорніть фрагмент

— Темані Афіф
джерело

Це не працює

— Nguyen You

@NguyenYou навіть якщо ви спробуєте 1px?

— Темані Афіф

1

Так! Однак я знайшов щось дійсно цікаве, коли збільшив ширину контуру до 35 пікселів. З’являється купа дивних прогалин.

— Nguyen You

1

Просто спробуйте додати поле донизу до верхнього та середнього знаків.

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

Розгорніть фрагмент

Сподіваюсь, це допомагає.

— Аллабакаш
джерело

1

Використовуйте дисплей та нижнє поле для виправлення стилів.

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

— умаір
джерело

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>

Розгорніть фрагмент

— умаір
джерело