父div的边框不绑定到孩子的大小[重复]答案

【问题标题】：Border of parent div not binding to size of children [duplicate]父div的边框不绑定到孩子的大小[重复]
【发布时间】：2021-01-19 06:34:19
【问题描述】：

我正在处理一个更大的程序，它在一个 div 中包含多个元素，包括一个画布。 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>

【问题讨论】：

我看到您在下面制作的关于底部 1px 间隙的 cmets - 我在您的问题的示例中看到了更大的间隙，但是对于下面的两种解决方案，它都会减小以匹配周围的间隙整个画布（我看到整个画布周围有 1px 的间隙，而不仅仅是在底部）。因此，您的代码中必须有其他内容增加了差距，因为下面的任何一个答案都可以解决它。

标签： html css html5-canvas border

【解决方案1】：

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

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

【讨论】：

底部似乎还有 1 个像素的间隙，这是什么原因？
在这种情况下，我建议重置 CSS

【解决方案2】：

您还需要使用position: absolute 将画布块放置在 div 中。正如我们所知，画布默认属性是内联的，因此 div 和 canvas 被覆盖。

下面是你答案的代码。

<!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>
    <style>
        #d {
            border: 3px solid black;
            position: absolute;  /* by default position is static */
        }
        
        #c {
            background: blue;
            display: block; /* by default is inline */
        }
    </style>
</head>

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

</html>

【讨论】：

【解决方案3】：

将vertical-align: bottom 添加到画布。

这是由于画布是内联元素造成的。因此，它实际上被认为是一个角色。因此，它必须遵循基线规则，即在行下方留出一点空间，以防 gjpqy 等字符低于基线。通过将垂直对齐设置为底部，您实际上是在将画布与下拉字母的底部对齐。只要画布本身高于行高，就没有问题。如果画布比行高短，您将开始在画布上方看到“幽灵边距”，因为它为 bdfhklt（较高的字母）保留了空间。这可以通过添加 line-height: 1px 规则来解决

【讨论】：

就像 Paul Shultz 的回答一样，这适用于较大的间隙，但在画布的最底部与边框之间似乎仍有 1 个像素的间隙。编辑：从画布高度减去 1 似乎可以解决这个问题，不知道为什么。