make div the size of its contents

Question

I'm trying to make a div the size of its contents, but I'm dealing with a ghost line. Can someone give it a look?

        * {
            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

The small gap is because the container is an inline element and there is space reserved for descender elements in a font (e.g. j, g, y). Remove it easily by adding vertical-align:top to the canvas rules:

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

jsFiddle example

or set the font-size to zero on the div:

jsFiddle example

or float the canvas:

jsFiddle example

Answer 2

There are three options I found already:

add display:block; to canvas

add vertical-align:top; to canvas

set display:inline-flex; to your div#holder

Answer 3

By default, a canvas is rendered inline, like a letter so you can use these solutions:

• display:block to canvas
• vertical-align: bottom; to canvas
• float: left; to canvas
• line-height: 0; to div#holder

.

Jsfiddle

Answer 4

give your #holder the CSS line-height: 0;

Since you're using inline, a text-like line-height is applied.

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

Answer 5

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

just add vertical-align: top; to canvas and that fixes it.