html - 父 div 的边框不绑定(bind)到子元素的大小

标签 html css html5-canvas border

<分区>

我有一个我一直在开发的更大的程序,它在一个 div 中有多个元素,包括 Canvas 。 div 的边框似乎总是超出其子项的大小,我在这里简化了代码,想知道是否有人有解决方案。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gap Test</title>
</head>

<body>
    <div id="d">
        <canvas id="c" height="400" width="600"></canvas>
    </div>
</body>

<style>
    #d {
        border: 3px solid black;
    }
    
    #c {
        background: blue;
    }
</style>

</html>

最佳答案

canvas 标签默认显示为内联,你可以通过在 CSS 中将其显示属性更改为 block 来摆脱该空间

<style>
    canvas {
        display: block;
    }
    #d {
        border: 3px solid black;
    }
    
    #c {
        background: blue;
    }
</style>

关于html - 父 div 的边框不绑定(bind)到子元素的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64190912/

相关文章:

html - 灯箱前向导航箭头在第一张图片后下降到下方

javascript - 突出显示选定的菜单项

css - 围绕 CSS-div 定位的文本 float

javascript - 使用 Reactjs 在 Canvas 上绘制图像后无法将 Canvas 转换为图像

javascript - HTML Canvas : Fill() not working with no errors in console

html - 从右到左的标点符号不正确,阿拉伯文字换行

javascript - 待办事项列表中的删除按钮 (HTML/JS)

javascript - 将 Canvas 与 Div 一起保存

jquery - 我可以在 node.js 中使用cheerio 包加载本地 html 文件吗?

html - 下拉框高度 : browser/OS compatibility issues