0
314
Visualizações¿Cómo eliminar espacios extraños entre tres divs que tienen el mismo color de fondo?
Estoy luchando con este problema desde hace bastante tiempo. El problema se puede ver en los dispositivos móviles (Android e iOS), es posible que sea necesario acercar un poco algunos dispositivos. En la PC, también puedo reproducir este error en el navegador Chrome cuando cambio al modo móvil. A continuación se muestra el código que se utiliza para reproducir el error:
<!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>El resultado esperado sería un div que se cumple con el color #553213. Sin embargo, en algunos dispositivos móviles, muestran líneas adicionales (o espacios) entre esos tres divs.
Oh mi iPhone
En mi PC, usando el navegador Chrome con modo móvil
¿Alguien sabe lo que está pasando aquí? Cualquier idea sobre cómo sucede y cómo solucionarlo sería muy apreciada.
10 Respostas
Responde à pergunta0
agregue un pequeño contorno para ocultar este problema:
.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
Simplemente intente agregar el margen inferior a las divisiones superior e intermedia.
<!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>Espero que esto ayude.
0
Supongo que esto se debe a la escala de la página. Intenta agregar esta metaetiqueta al encabezado:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
0
Después de leer los comentarios he visto que Madison Courto tenía una sugerencia de
margin: -1px;que se confirmó para resolver el problema real, pero ha causado problemas en otras partes de la página. Entonces, apliquemos esta idea solo para los divs reales:
<!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
Encontré esta respuesta.
Entonces, la solución es agregar un margin-top: -1px; a las clases top , middle y 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> Y también se ve bien en dispositivos móviles y PC. La altura del div no cambia. Queda 300px .
0
Prueba con background . Esto funciona bien en mi móvil:
<!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>No sé cuál es la causa real. pero cuando probé a continuación, el color de las líneas blancas se convirtió en negro y tuve esta 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>haga clic en el div superior o inferior
0
Use la pantalla y la parte inferior del margen para corregir el estilo.
.top, .middle, .bottom { height: 100px; background-color: #553213; margin-bottom: 5px; display: block; }0
Use la pantalla y la parte inferior del margen para corregir el estilo.
<!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
El motivo de este problema podría deberse a la forma en que los diferentes navegadores en diferentes pantallas manejan el block de display , los estilos inline-block .
por ejemplo, los elementos inline-block tendrán un espacio pequeño automático a la derecha. la gente suele resolver esto usando el margin-left negativo.
Por defecto, un div es un elemento de nivel de block .
Este espacio inferior al que se ha enfrentado también podría deberse a la forma en que se manejan los elementos a nivel de bloque.
Como resolver el espacio inline-block con margin-left negativo,
este espacio a nivel block puede resolverse usando
-
margin-topnegativo o - cambiar el estilo de
divatable, tipotable-cello tipo deflexboxusando css