0
299
ViewsHow to remove weird gaps between three divs having the same background-color?
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
On my PC, using Chrome browser with mobile mode
Does anyone know what's going on here? Any ideas about how it happens and how to fix it would be really appreciated.
10 answers
Answer question0
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>0
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.
0
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;">
0
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>
0
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.
0
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
0
Use display and margin bottom to fix styling.
.top, .middle, .bottom {
height: 100px;
background-color: #553213;
margin-bottom: 5px;
display: block;
}
0
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>0
<!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>0
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-topor - changing
div's style to eithertable,table-celltype orflexboxtype using css