Menu
When using HTML5, if you place a canvas/video/audio/svg element in a div, there will be a 4px gap below these elements. I tested the code below in almost all browsers which support HTML5, unfortunately they all have the same problem.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bug</title> </head> <body> <div style="border: 1px solid blue"> <canvas width="200" height="100" style="border: 1px solid yellow"></canvas> </div> </body> </html> 
982
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:
<div class="container"> <canvas width="200" height="100"></canvas> </div> <div class="container"> <canvas id="block" width="200" height="100"></canvas> </div> CSS:
.container { border: 1px solid blue; } canvas { border: 1px solid red; } #block { display: block; } Output:
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
