Border of parent div not binding to size of children

Question

I have a larger program I've been working on that has multiple elements within a div, including a canvas. The div's border always seems to extend over the size of its children, I've simplified the code here, and am wondering if anyone has a solution.

<!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>

I see the comments you made below about the 1px gap at the bottom - I see a larger gap in the example in your question but with both of the solutions below it is reduced to match the gap around the whole canvas (I'm seeing a 1px gap around the whole canvas, not just at the bottom). Therefore there must be something else in your code that is adding to the gap because either answer below fixes it. — FluffyKitten, Oct 04 '20 at 04:10

score 3 · Answer 1 · answered Oct 04 '20 at 03:47

3

The canvas tag by default has a display of inline, you can get rid of that space by changing its display property to block in CSS

<style>
    canvas {
        display: block;
    }
    #d {
        border: 3px solid black;
    }
    
    #c {
        background: blue;
    }
</style>

answered Oct 04 '20 at 03:47

paul-schultz

326
1
8

There still seems to be a 1 pixel gap at the bottom, any reason for this? – Slayer Of Whales Oct 04 '20 at 03:56
In that case I would suggest a CSS reset – paul-schultz Oct 04 '20 at 04:16

score 2 · Answer 2 · answered Oct 04 '20 at 03:53

Add vertical-align: bottom to canvas.

This is caused by the canvas being an inline element. As such, it is effectively considered a character. As such, it must follow the baseline rule, which is to leave a little space below the line in case of characters such as gjpqy which drop below the baseline. By setting the vertical-align to bottom, you are actually aligning the canvas to the bottom of the drop-down letters. So long as the canvas itself is taller than the line-height, you will have no problems. Should the canvas be shorter than the line-height, you will start seeing "ghost margins" above the canvas as it reserves room for bdfhklt, the taller letters. This can be fixed by adding a line-height: 1px rule

Just like Paul Shultz's answer, this works for the large gap, but there still appears to be a 1 pixel gap at the very bottom of the canvas between it and the border. Edit: subtracting 1 from the canvas height appears to solve this issue, not sure why. — Slayer Of Whales, Oct 04 '20 at 04:01

Subrato Pattanaik · Accepted Answer · 2020-10-04T04:28:19.417

You also need to use position: absolute for placing the canvas block inside the div. As we know that canvas default property is inline so that div and canvas were getting overriding.

Below is the code for your answer.

<!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>

Border of parent div not binding to size of children

3 Answers3