使div成为其内容的大小

Question

我试图将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>

https://jsfiddle.net/xjmz6n68/

Answer 1

小间隙是因为容器是内联元素，并且为字体中的下行元素（例如j，g，y）保留了空间。通过在canvas规则中添加vertical-align：top来轻松删除它：

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

<强> jsFiddle example

或在div上将font-size设置为零：

<强> jsFiddle example

或浮动画布：

<强> jsFiddle example

Answer 2

我发现有三个选项：

将display:block;添加到canvas

将vertical-align:top;添加到canvas

将display:inline-flex;设置为div#holder

Answer 3

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

• display:block至canvas
• vertical-align: bottom;到画布
• float: left;到画布
• line-height: 0;至div#holder

Jsfiddle

Answer 4

给你的#holder CSS line-height: 0;

由于您使用的是inline，因此会应用类似文本的行高。

https://jsfiddle.net/svArtist/cm4r6k7p/

Answer 5

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

只需添加vertical-align：top;画布，并修复它。