将表情符号放在段落中而不影响`line-height` [英] Putting emoticons in paragraphs without affecting `line-height`

问题描述

无论表情符号有多大，如何在不影响 line-height 的情况下将表情符号插入段落中？就是

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

我得到的最接近的位置是 position：absolute 或 vertical-align：text-top ，什么都不做。

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>

我在此处和此处，但是两者都有

推荐答案

您可以使用

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

其中 [something] 是（containerLineHeight-imageHeight）/ 2 。

还请注意，您可以只使用 margin：[something] 0 如果没有左右空白。

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

例如，由于图像的高度为：35px ，假设容器具有 line-height：20px ，

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>

请注意，使用 7.5px 以上的值不会造成损害，因为 vertical-align：middle 。因此，您可以使用

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.

因此，假设容器的宽度大于图像的高度，则边距：-50 ％0 应该足够了。

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>

为了安全起见，您还可以使用 margin：-1000000％0

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>

这篇关于将表情符号放在段落中而不影响`line-height`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！