Emojis make display: block divs taller

Issue

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>

Solution

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>

Answered By - Roko C. Buljan