Menu
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.
957
You get whitespace there because you have whitespace inbetween the divs. Whitespace between inline elements is interpreted as a space. However, this is a bad way to do what you want to do. You should float the elements if thats what you want to do.
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.
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With