'Emojis make display: block divs taller [duplicate]

When using emojis inside display: block div elements, they get slightly taller. This only seems to happen with block elements; inline ones have the same height with and without emojis. Is there any way to keep them the same height?

I've already tried setting margin: 0 and padding: 0, neither of which had any effect. Increasing padding made everything taller, but didn't even them out.

https://jsfiddle.net/719kbg8u/2/

.outer {
  border: 1px dotted red;
}

.inline {
  display: inline;
}
<div class="outer">Baguette 🥖 (block)</div>
<div class="outer">No baguette (block)</div>
<br><br>
<div class="outer inline">Baguette 🥖 (inline)</div>
<br>
<div class="outer inline">No baguette (inline)</div>
htmlcss


Solution 1:[1]

Some emoji occupy a greater line-height.
Being strict about the line height might help:

.outer {
  border: 1px dotted red;
  line-height: 1em; /* since of emoji */
}

.inline {
  display: inline;
}
<div class="outer">Baguette ? (block)</div>
<div class="outer">No baguette (block)</div>
<br><br>
<div class="outer inline">Baguette ? (inline)</div>
<br>
<div class="outer inline">No baguette (inline)</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Roko C. Buljan

Related Questions