HTML: <picture> generates empty space

While layouting a HTML page I discovered a weird issue with the HTML <picture> tag that created empty space below the actual image.

Consider the following code:

  <picture><img src="red.png"/></picture><picture><img src="green.png"/></picture>
  <picture><img src="green.png"/></picture><picture><img src="red.png"/></picture>

There is some space between the two <div> tags:

Picture'd images with white space

Looking at that space with the dev inspector, we see that the space is coming from the picture tag:

Dev inspector

The picture tag is seemingly unrelated to the <img> tag, and has a height of 17px (but the same width as the image).

If we remove the <picture> tag and only keep div and img, we have the same issue - only that this time div is providing the empty space below the images.


HTML 5.2: 4.7.3. The picture element says:

[...] the picture element itself does not display anything; it merely provides a context for its contained img element [...]

It is also defined to be a part of the Phrasing content category, which means it is like a letter in a text.

In CSS2, letters are 10.6.1 Inline, non-replaced elements for which the rule is:

The height of the content area should be based on the font [...]

So when the height of picture is based on the font size, we can change the line height of the surrounding div container:

div {
    line-height: 0;

And now, voila:

Fixed picture'd images without white space

via: Why does my HTML5 <picture> have a height outside of its <img> and why does it not contain the <img>?

Written by Christian Weiske.

Comments? Please send an e-mail.