使 div 其内容的大小[重复]

Posted 2023-03-06

【中文标题】使 div 其内容的大小[重复]

【英文标题】：make div the size of its contents [duplicate]

【发布时间】：2016-03-09 20:55:30

【问题描述】：

我正在尝试将 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"  ></canvas>
    </div>

https://jsfiddle.net/xjmz6n68/

【参考方案1】：

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

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

jsFiddle example

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

jsFiddle example

或浮动画布：

jsFiddle example

【参考方案2】：

我已经找到了三个选项：

将display:block; 添加到canvas

将vertical-align:top; 添加到canvas

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

【参考方案3】：

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

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

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

【参考方案4】：

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

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

.

Jsfiddle

【参考方案5】：

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

只需添加垂直对齐：顶部；画布并修复它。