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

by

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:

enter image description here

More Related Contents:

  1. Canvas is stretched when using CSS but normal with “width” / “height” properties
  2. Size of HTML5 Canvas via CSS versus element attributes
  3. Changing three.js background to transparent or other color
  4. Canvas is stretched when using CSS but normal with `width` & `height` attributes
  5. How do you easily horizontally center a using CSS? [duplicate]
  6. CSS Floating Divs At Variable Heights [duplicate]
  7. Footer at bottom of page or content, whichever is lower
  8. Is there a way to make a child DIV’s width wider than the parent DIV using CSS?
  9. Is float for layout bad? What should be used in its place?
  10. Font Awesome not working, icons showing as squares
  11. How to create equal height columns in pure CSS [duplicate]
  12. How do I right align div elements?
  13. Right to Left support for Twitter Bootstrap 3
  14. What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?
  15. How does object-fit work with canvas element?
  16. How to make a element expand or contract to its parent container?
  17. scale HTML5 Video and break aspect ratio to fill whole site
  18. Disable zoom on a div, but allow zoom on the page (an alternate div)
  19. element not working in Internet Explorer 11
  20. Split Div Into 2 Columns Using CSS
  21. make canvas as wide and as high as parent
  22. Why can’t I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height
  23. How to Include CSS style when converting svg to png
  24. Is there a way to curve / arc text using CSS3 / Canvas
  25. How to add a search box with icon to the navbar in Bootstrap 3?
  26. Align vertically using CSS 3
  27. HTML5 image icon to input placeholder
  28. background-image doesn’t appear if is empty?
  29. CSS Floating Divs with different height are aligned with space between them
  30. Horizontal scroll in DIV with many small DIV’s inside (no text)

Leave a Comment