Emojis make display: block divs taller

user_18230081 0
Viewed 19

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>

css html
1 Answers

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>

user_3839040
Related