Why does container div insist on being slightly larger than IMG or SVG content?

Trying adding:

img { display: block; }

to your CSS. Since an <img> is an inline element by default, its height is calculated differently as related to the default line-height value.

On inline elements, the line-height CSS property specifies the height that is used in the calculation of the line box height.

On block level elements, line-height specifies the minimal height of line boxes within the element.

Source: https://developer.mozilla.org/en/CSS/line-height

Your image is using the line-height of its parent. Try this:

.imagebg { line-height: 0 }

try adding:

vertical-align: middle;

This is used in google material design lite for removing the gap between audio, canvas, iframes, images, videos and the bottom of their containers.

Material Design Lite: https://getmdl.io

Github discusion: https://github.com/h5bp/html5-boilerplate/issues/440

Apart from other working answers, setting display property of parent to flex worked for me as well:

.imagebg { display: flex }