减少两个连续^元素之间的空白

Question

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 ?

Answer 1

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>

Answer 2

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.

Answer 3

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>