如何解决父div的边框不与孩子的大小有关
我正在开发一个较大的程序，该程序在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>解决方法
默认情况下，canvas标签具有嵌入式显示，可以通过更改其display属性以在CSS中阻止来消除该空间
<style>
canvas {
display: block;
}
#d {
border: 3px solid black;
}
#c {
background: blue;
}
</style>
在画布上添加vertical-align: bottom。
这是由于画布是嵌入式元素而引起的。因此，它实际上被认为是角色。因此，它必须遵循基线规则，如果gjpqy之类的字符降到基线以下，该规则将在该行下方留出一些空间。通过将vertical-align设置为bottom，实际上是将画布与下拉字母的底部对齐。只要画布本身比行高高，您就不会有问题。如果画布短于行高，您将开始在画布上方看到“鬼边距”，因为它为bdfhklt（较高的字母）保留了空间。可以通过添加line-height：1px规则来解决
,您还需要使用position: absolute将canvas块放置在div中。我们知道canvas的默认属性是内联的，因此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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
