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:
<div> <picture><img src="red.png"/></picture><picture><img src="green.png"/></picture> </div> <div> <picture><img src="green.png"/></picture><picture><img src="red.png"/></picture> </div>
There is some space between the two <div> tags:
Looking at that space with the dev inspector, we see that the space is coming from the picture tag:
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.
Specifications
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:
via: Why does my HTML5 <picture> have a height outside of its <img> and why does it not contain the <img>?