Reduce white space between two consecutive <sup> elements-CodePudding

I have the following code

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

Which are displayed like 1 , 2. When I try apply some style I don't know where, since no margins or paddings are set. So, which style should I apply for all but the first sup?

CodePudding user response：

You can try just using one sup. If you need two, you can also try applying a negative margin on sup. Since you don't need it on the first-child but need it on all other children, use this:

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

See it working here:

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

<p>Test
  <sup>1,2,</sup>
  <sup>3</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>

CodePudding user response：

Just place the comma inside the first <sup> element rather than in the subsequent ones like so:

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

CodePudding user response：

Does this solve your problem ?

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

If you have to use two elements, then try

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

I hope I could help you, otherwise I'll need some more info.