How to remove weird gaps between three divs having the same background-color?
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>
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;">
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.
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