display:grid布局下emoji倾斜、CSS样式仅作用于背景问题

学习测试display: grid布局过程中，grid-template-columns、grid-template-rows行列配置运行正常，但作为网格项的<i>标签内emoji出现侧向倾斜的异常显示，与参考教程中emoji竖直正常显示的效果不符，存在两个核心疑问：

1. 为何display: grid布局下emoji会出现侧向倾斜？
2. 如何让设置在网格项上的CSS样式能够作用于emoji本身，而非仅生效于元素背景？

问题复现代码：

body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    margin: 0;
    min-height: 100vh;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 500px 1fr;
    grid-template-rows: 100px 200px;
    place-items: center;
}

i {
    background-color: blue;
    width: 50px;
    height: 50px;
}

<div>
    <div class="grid">
            <i>🤩</i>
            <i>🤩</i>
            <i>🤩</i>
            <i>🤩</i>
            <i>🤩</i>
            <i>🤩</i>
    </div>
</div>

• emoji倾斜和grid布局没有直接关系：<i>标签的浏览器默认样式为font-style: italic（斜体），内部emoji作为文本内容会继承该斜体属性，在当前引入的Poppins字体渲染逻辑下，斜体的字形倾斜效果会作用到emoji上，最终出现侧向倾斜的表现。即使不使用grid布局，将emoji放在带默认斜体样式的<i>标签中，也会出现相同的倾斜问题。
• 样式仅作用于元素背景的核心原因：你给<i>标签设置的宽高、背景属性都是作用在<i>元素本身的盒模型上，emoji是<i>内部的文本节点，盒模型类属性不会直接控制文本内容的显示效果，因此只会看到背景填充在<i>的区域，emoji本身不会被这些属性影响。

1. 清除<i>标签的默认斜体样式，从根源解决emoji倾斜问题，给i选择器添加代码：font-style: normal;
2. 针对emoji本身的样式控制，使用文本类CSS属性，不要直接依赖父容器的盒模型属性：
   • 控制emoji大小：给<i>设置font-size属性，emoji作为文本会跟随字号同步缩放
   • 控制emoji在容器内的对齐：搭配text-align: center、line-height（值设为和容器高度一致）实现居中
   • 如果需要给emoji本身添加背景、圆角、边框等盒模型样式，单独给emoji套一层行内标签（如<span>），直接给该标签设置对应样式即可

修复后的核心CSS参考：

i {
    background-color: blue;
    width: 50px;
    height: 50px;
    /* 清除默认斜体，解决emoji倾斜 */
    font-style: normal;
    /* 控制emoji本身大小 */
    font-size: 32px;
    /* 实现emoji在容器内居中 */
    text-align: center;
    line-height: 50px;
}

内容的提问来源于stack exchange，提问作者Vitor Oliveira