减少两个连续 <sup> 元素之间的空白答案

【问题标题】：Reduce white space between two consecutive <sup> elements减少两个连续 <sup> 元素之间的空白
【发布时间】：2022-06-22 23:16:16
【问题描述】：

我有以下代码

<p>Test
  <sup>1</sup>
  <sup>, 2</sup>
</p>

显示为1 , 2。当我尝试应用一些样式时，我不知道在哪里，因为没有设置边距或填充。那么，除了第一个sup，我应该申请哪种风格？

【问题讨论】：

另一种想法：只使用一个sup
无法使用一个元素，因为我需要在其中存储更多信息。我需要有两个不同的元素。

标签： html css

【解决方案1】：

这能解决你的问题吗？

<p>
    <sup>1, 2</sup>
</p>

如果你必须使用两个元素，那么试试

<p>test
      <sup>1</sup>
      <sup style="margin:0; margin-left:-5; padding:0;">, 2</sup>
</p>

希望能帮到你，否则我需要更多信息。

【讨论】：

我需要将它放在 CSS 中的 style 中。我不能直接将它应用到元素上。我没有考虑margin-left 选项。至少这是我需要进一步检查的某种想法。
看到这个问题：stackoverflow.com/questions/8928194/…
我认为如果你将它添加到你的css文件中会很好，如果你想确保它不会影响其他元素你可以在你的sup元素中添加一个id属性并将css使用 id 选择器的规则。如果我的评论不清楚，我可以编辑我的答案

【解决方案2】：

您可以尝试只使用一个sup。如果你需要两个，你也可以尝试在sup 上应用一个否定的margin。由于您在 first-child 上不需要它，但在所有其他孩子上都需要它，请使用：

p > sup:not(:first-child) {}

p>sup:not(:first-child) {
  margin-left: -4px;
}

<p>Test
  <sup>1,</sup>
  <sup>2</sup>
</p>

<p>Test
  <sup>1,</sup>
  <sup>2,</sup>
  <sup>3,</sup>
  <sup>4</sup>
</p>

<p>Test
  <sup>1,</sup>
  <sup>2,</sup>
  <sup>3,</sup>
  <sup>4,</sup>
  <sup>5,</sup>
  <sup>6,</sup>
  <sup>7,</sup>
  <sup>8</sup>
</p>

【讨论】：

我最喜欢接近。但有些担心：它不适用于第一个p 因此我认为更合适的版本应该是p > sup:nth-child(2)。只要我不超过 2 个（即 n 个元素），就可以了。那么not(first)的if怎么申请呢？因为p > sup:not(first-child) 也将它应用于第一个（我不明白为什么？）
@LeO 我仅将p:nth-child(2) 用于演示目的。另外，您需要在:not(:first-child) 中添加:。看到这个fiddle，就像一个魅力。