当在display: blockdiv个元素中使用表情符号时,它们会稍微高一些.这似乎只发生在block个元素上;inline个字母的高度相同,有和没有表情符号.有没有办法让它们保持同样的高度

我已经试过设置margin: 0padding: 0,但都没有效果.增加padding会让所有的东西都变得更高,但并没有让它们变平.

.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>

推荐答案

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>

Html相关问答推荐

HTML图像无法正确放大和缩小规模

springBoot + Thymeleaf:基于Locale设置页面语言

UseEffect()从不调用preact

需要帮助实现悬停动画效果

如何最大限度地减少Cookie同意代码对性能的影响?

这<;td&>如何溢出<;表>;?

需要帮助创建一个简单的html css网格布局

如何在排序上重用参数?

HX-POST未使用正确的操作(路径)

CSS 伪类 Select 器未按预期工作

Swift WKUserContentController 和 WKScriptMessageHandler 设置不正确

我如何使用 html 在表格的单元格内实现下面显示的背景 colored颜色 加载器(请判断设计参考的图像链接)

CSS 网格跨度行到所有行

HTML、CSS设计图像出格

如何动态调整彼此重叠的两个 div 的大小,使它们在增长时保持相同的高度

获取 div 中每个元素的 href 并使用它

水平对齐两列中的两个按钮 同一级别

不理解 CSS 中的 General sibling combinator (~)

CSS 网格自动高度不适用于特定网格区域

是否有一种静态方式可以根据暗模式 Select 一张或另一张图像?