Javascript 如何在不影响行的情况下为元素设置边距顶部？

这是我的密码：

div{
边框：1px实心；
填充：10px；
}
跨度{
字体大小：12px；
字体大小：正常；
线高：1.7；
文本对齐：居中；
填充：4px14px 3px14px；
显示：内联块；
边界半径：2px；
字体系列：arial；
背景色：rgba（251,251,251,0.97）；
边框：1px实心#F3；
颜色：#666；
左边距：10px；
垂直对齐：中间对齐；
}

无论什么

将此附加CSS用于字体Aewome star：

.fa-star {
  position: relative;
  top: 1px;
}

它将星1px相对于其原始位置向下移动，而不会影响其他元素（这就是

位置：relative

的好处）

div{
边框：1px实心；
填充：10px；
}
跨度{
字体大小：12px；
字体大小：正常；
线高：1.7；
文本对齐：居中；
填充：4px14px 3px14px；
显示：内联块；
边界半径：2px；
字体系列：arial；
背景色：rgba（251,0.97）；
边框：1px实心#F3；
颜色：#666；
左边距：10px；
垂直对齐：中间对齐；
}
法星先生{
位置：相对位置；
顶部：1px；
}

无论什么

因为您使用的是带垂直对齐的内联块，所以需要使用顶部和相对定位来移动星形。请参见下面的代码示例

div{
边框：1px实心；
填充：10px；
}
跨度{
字体大小：12px；
字体大小：正常；
线高：1.7；
文本对齐：居中；
填充：4px14px 3px14px；
显示：内联块；
边界半径：2px；
字体系列：arial；
背景色：rgba（251,0.97）；
边框：1px实心#F3；
颜色：#666；
左边距：10px；
垂直对齐：中间对齐；
}
法兰西{
位置：相对位置；
顶部：1px；
}

无论什么

假设您想向下移动星号

1px

使其垂直居中。。。您可以使用flexbox来对齐它（以及

div

中的所有其他内容）

您还可以从

span

中删除

display:inline块

和

vertical align

div{
边框：1px实心；
填充：10px；
显示器：flex；
对齐项目：居中；
}
跨度{
字体大小：12px；
字体大小：正常；
线高：1.7；
文本对齐：居中；
填充：4px14px 3px14px；
边界半径：2px；
字体系列：arial；
背景色：rgba（251,251,251,0.97）；
边框：1px实心#F3；
颜色：#666；
左边距：10px；
}

无论什么

将div内的所有元素设置为垂直对齐顶部|中部

.div{
边框：1px实心；
填充：10px；
}
.div>*{
垂直对齐：中间对齐；
}
.span1{
字体大小：12px；
字体大小：正常；
线高：1.7；
文本对齐：居中；
填充：4px14px 3px14px；
显示：内联块；
边界半径：2px；
字体系列：arial；
背景色：rgba（251,251,251,0.97）；
边框：1px实心#F3；
颜色：#666；
左边距：10px；
垂直对齐：中间对齐；
}
法星先生{
页边距顶部：20px；/*将此更改为1px*/
}

无论什么

尝试将

位置：相对
和
底部：1px
添加到
.fa-star