<p>Alternatively, you can use percentages, which
   will be calculated with respect to the width of the generated box's
   containing block. &#128517;Therefore, assuming the container's width
   is greater than the image's height, margin: -50% 0 should be enough.
   Hide code snippet
</p>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

How to avoid change in line-height on insertion of emojis?

CodePudding user response：

You can set a fixed line-height like so:

p {
  line-height: 20px !important;
}

<p>Alternatively, you can use percentages, which
   will be calculated with respect to the width of the generated box's
   containing block. &#128517;Therefore, assuming the container's width
   is greater than the image's height, margin: -50% 0 should be enough.
   Hide code snippet
</p>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Set css property line-height to 1.2em could set the p tag to default height

    p {
      line-height: 1.2em;  
    }