Javascript
元素有一个边距，即使 "margin： 0px;"应用样式

发布于08月08日

我首先创建了一个名为snake-container的<div>，其中包含了500x500px的除法瓷砖.然后，我在Java脚本中使用for循环将20x20px <div>的25x25px网格设置为黑色背景.然而，它没有像我希望的那样创建一个网格，而是创建了一个长达625个<div>的列.事实证明，每个<div>都有一个奇怪的边距，从左到右一直延伸到.tiles个<div>的范围内.我已将所有内容设置为0像素边距，但这些奇怪的行状边距仍然存在.为什么会发生这种事？

代码如下:

<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>

<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>

Javascript
元素有一个边距，即使 "margin： 0px;"应用样式

推荐答案

参考文献

Javascript相关问答推荐

Phaser框架-将子对象附加到Actor

当在select中 Select 选项时，我必须禁用不匹配的 Select

深嵌套的ng-container元素仍然可以在Angular 布局组件中正确渲染内容吗？

Google图表时间轴—更改hAxis文本 colored颜色

通过嵌套模型对象进行Mongoose搜索

如何将Map字符串，布尔值转换为{key：string；value：bo布尔值；}[]？<>

屏幕右侧屏障上的产卵点""

如何在输入元素中附加一个属性为checkbox？

如何在FastAPI中为通过file：/URL加载的本地HTML文件启用CORS？

触发异步函数后不能显示数据

AJAX POST在控制器中返回空(ASP.NET MVC)

基于产品ID更新条带产品图像的JavaScript命中错误

为列表中的项目设置动画

在JavaScript中，有没有一种方法可以迭代字符串的词法标记？

我的NavLink活动类在REACT-ROUTER-V6中出现问题

Chart.js Hover线条在鼠标离开时不会消失

如何向内部有文本输入字段的HTML表添加行？

如何在css中裁剪成一定Angular 的圆的一部分，而不需要复杂的多边形

如何在单击Search按钮时更新Reaction组件？

如何在使用FOR AWAIT时从异步生成器中获取返回值