23

I'm struggling with this issue for quite a while now. The issue can be seen on mobile devices (Android and iOS), some devices may need to be zoomed-in a little bit. On PC, I can also reproduce this bug on Chrome browser when switching to mobile mode. Below is the code using to reproduce the 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>

The expected result would be a div which is fulfilled with #553213 color. However, on some mobile devices, they display additional lines (or gaps) between those three divs.

Om my iPhone

enter image description here

On my PC, using Chrome browser with mobile mode

enter image description here

Does anyone know what's going on here? Any ideas about how it happens and how to fix it would be really appreciated.

13
  • 3
    Why do you have margin 0? I can't reproduce, perhaps try setting the margin to -1px on each div. Dec 18, 2019 at 4:21
  • 3
    Same here. Cannot reproduce on a PC. Probably a phone browser issue.
    – asprin
    Dec 18, 2019 at 4:43
  • 3
    mobile browser issues probably
    – louie kim
    Dec 18, 2019 at 5:55
  • 3
    It seems like this is an issue with certain browsers/operating systems/devices. This likely means that you can only 'fix' this by using a hack. Or suggest the developers of these browsers/operating systems/devices to fix the bug.
    – Daan
    Dec 20, 2019 at 8:07
  • 2
    Since all these divs have the same background could you not just put the background colour on the parent element instead?
    – Moob
    Dec 20, 2019 at 9:26

10 Answers 10

6
+50

I found this answer.

So the solution is to add a margin-top: -1px; to top, middle, and bottom classes.

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

And it looks good on mobile and PC, too. The divs height doesn't change. It remains 300px.

5

I guess this is due to the scale of the page. Try to add this meta tag to the head:

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

4

After reading the comments I have seen that Madison Courto had a suggestion of

margin: -1px;

which was confirmed for solving the actual issue, but it has caused issues on other parts of the page. So, let's apply this idea for the actual divs only:

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

Try with background. This works fine in my mobile:

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

I don't know what is actual cause. but when i tried below then color of white lines converted into black then i got this idea:

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

click on top or bottom div

2

The reason for this issue might be due to the way display block, inline-block styles being handled by different browsers on different screens.

for example, inline-block elements will have an auto small space at right. people usally solve this using negative margin-left.


By default, a div is a block level element.

This bottom space you been facing could also be because of the way block level elements are being handled.


Like solving inline-block space with negative margin-left,

this block level space can either be solved using

  • negative margin-top or
  • changing div's style to either table, table-cell type or flexbox type using 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

add a small outline to hide this issue:

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

2
  • @NguyenYou even if you try 1px ? Dec 18, 2019 at 10:59
  • 1
    Yup! However, I found something really interesting when increasing the outline-width to 35px. A bunch of weird gaps appear.
    – You Nguyen
    Dec 18, 2019 at 11:05
1

Just try adding the margin-bottom to the top and middle divs.

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

Hope this helps.

1

Use display and margin bottom to fix styling.

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

Use display and margin bottom to fix styling.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.