Putting emoticons in paragraphs without affecting

Question

How does one insert an emoticon into a paragraph without affecting the line-height regardless of how big the emoticon is? Ie. like:

The closest I've gotten is either position: absolute or vertical-align: text-top, none of which does the job.

p img {
    height: 35px;
    display: inline;
}
#one img {
    vertical-align: text-top;
}
#two img {
    position: absolute;
}

<p id="one">Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>
<p id="two">Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>

I'm aware of similar questions here and here, however both have gone stale and are without proper answers.

Answer 1

You can use

margin-top: [something];
margin-bottom: [something];
vertical-align: middle;

Where [something] is (containerLineHeight - imageHeight) / 2.

Also note you can just use margin: [something] 0 if there is no right nor left margin.

For example, since the image has height: 35px, assuming the container has line-height: 20px,

margin: -7.5px 0; // (20px - 35px) / 2

p {
  line-height: 20px;
}
p img {
  height: 35px;
  display: inline;
  vertical-align: middle;
  margin: -7.5px 0;
}

<p>Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>

Note using values above 7.5px won't hurt because of vertical-align: middle. Therefore, you can use something like

margin: -1000000px 0;

p img {
  height: 35px;
  display: inline;
  vertical-align: middle;
  margin: -1000000px 0;
}

<p>Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>

Alternatively, you can use percentages, which will be calculated with respect to the width of the generated box's containing block.

Therefore, assuming the container's width is greater than the image's height, margin: -50% 0 should be enough.

p img {
  height: 35px;
  display: inline;
  vertical-align: middle;
  margin: -50% 0;
}

<p>Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>

To be safer, you can also use something like margin: -1000000% 0

p img {
  height: 35px;
  display: inline;
  vertical-align: middle;
  margin: -1000000% 0;
}

<p>Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>