Html 将div设置为其内容的大小

我试图制作一个与内容大小相同的div，但我要处理的是一条鬼魂线。有人能看一下吗

        * {
            margin: 0;
            padding: 0;
        }

        div#holder {
            background-color: blue;
            display: inline-block;
        }

        canvas {
            cursor: pointer;
            background-color: gray;
        }


    <div id="holder">
        <canvas id="canvas" width="300" height="300"></canvas>
    </div>

*{
保证金：0；
填充：0；
}
div#holder{
背景颜色：蓝色；
显示：内联块；
}
帆布{
光标：指针；
背景颜色：灰色；
}

---

默认情况下，画布以内联方式呈现，就像字母一样，因此您可以使用以下解决方案：

• 显示：块

  到

  画布

• 垂直对齐：底部到画布

• float：左到画布

• 行高：0至
  div#holder

---

默认情况下，画布以内联方式呈现，就像字母一样，因此您可以使用以下解决方案：

• 显示：块

  到

  画布

• 垂直对齐：底部到画布

• float：左到画布

• 行高：0至
  div#holder

---

小间隙是因为容器是一个内联元素，并且在字体中为下行元素保留了空间（例如j、g、y）。通过将垂直对齐：顶部添加到画布规则，可以轻松删除它：

canvas {
    cursor: pointer;
    background-color: gray;
    vertical-align: top;
}

或将div上的字体大小设置为零：

或者在画布上浮动：

---

这个小间隙是因为容器是一个内联元素，并且在字体（例如j、g、y）中为下行元素保留了空间。通过将垂直对齐：顶部添加到画布规则，可以轻松删除它：

canvas {
    cursor: pointer;
    background-color: gray;
    vertical-align: top;
}

或将div上的字体大小设置为零：

或者在画布上浮动：

---

我已经找到了三个选项：

添加

显示：块到
画布

添加
垂直对齐：顶部到
画布

设置
显示：内联flex
到您的
div#holder
我已经找到了三个选项：

添加
显示：块到
画布

添加
垂直对齐：顶部到
画布

设置
显示：内联flex给你的
div#holder
给你的
#holder
CSS
行高：0

由于使用的是
内联
，因此会应用类似于行高的文本

将CSS
行高：0

由于使用的是
内联
，因此会应用类似于行高的文本


只需添加垂直对齐：顶部；到画布，然后修复它

只需添加垂直对齐：顶部；到画布，然后修复它