There is a 4px gap below canvas/video/audio elements in HTML5

Question

When using HTML5, if you place a canvas/video/audio/svg element in a div, there will be a 4px g

Answer 1

It's because they are inline elements with resizable height (most inline elements are not explicitly resizable). If you set them to display: block; the gap goes away. You can also set vertical-align: top; to achieve the same result.

Demo: http://jsfiddle.net/ThinkingStiff/F2LAK/

HTML:

CSS:

.container {
    border: 1px solid blue;
}

canvas {
    border: 1px solid red;
}

#block {
    display: block;
}

Output: