0
149
ViewsEl elemento <div> tiene un margen aunque el "margen: 0px;" se aplica el estilo
Comencé creando un <div> llamado snake-container , que contiene los mosaicos de división, que es 500x500px. Luego usé un bucle for en Javascript para poner una cuadrícula de 25x25px de 20x20px <div> s con fondos negros. Sin embargo, en lugar de crear una cuadrícula como yo quería, creó una columna larga de 625 <div> s. Resulta que cada <div> tiene un margen extraño que se extiende de izquierda a derecha dentro de .tiles <div> . Configuré todo en un margen de 0 px, pero estos extraños márgenes en forma de fila permanecen. ¿Por qué está pasando esto?
Aquí está el código:
<html> <head> <title>Snake</title> </head> <body> <div id="snake-container"> <div id="tiles"> </div> </div> </body> <script> for (let i = 0; i < 625; i++) { const tile = document.createElement("div"); tile.classList.add("tile"); document.getElementById("tiles").appendChild(tile); } </script> <style> * { margin: 0px; padding: 0px; } #snake-container { width: 100%; height: 100%; display: flex; justify-content: center; } #tiles { width: 500px; height: 500px; } .tile { width: 20px; height: 20px; background-color: black; margin: 0px; } </style> </html>1 answers
Answer question0
El motivo del espacio es que a la propiedad justify-content se le asigna un valor center . La siguiente imagen muestra el comportamiento de los contenedores cuando la propiedad justify-content se establece en un valor center .
La siguiente imagen es una demostración de la característica que causa la brecha en Chrome Dev Tools.
En la aplicación a continuación, se eliminó la propiedad justify-content en el bloque #snake-container .
<html> <head> <style> * { margin: 0px; padding: 0px; } #snake-container { width: 100%; height: 100%; display: flex; } #tiles { width: 500px; height: 500px; } .tile { width: 20px; height: 20px; background-color: black; } </style> <title>Snake</title> </head> <body> <div id="snake-container"> <div id="tiles"></div> </div> </body> <script> for (let i = 0; i < 625; i++) { const tile = document.createElement("div"); tile.classList.add("tile"); document.getElementById("tiles").appendChild(tile); } </script> </html>