Getting Rid of Space with the Superscript in HTML Emails

getting rid of space with the superscript in html emails

I've made few experiments in jsFiddle and I think you will be able to use:

<sup style="line-height: 0">®</sup>

in firefox it does not increases the gap between the lines

superscript leaving space in the html email

Superscripts often cause problems in spacing between lines. Is that what you mean? Usually the styling in your code helps against such issues. (I’m not sure whether you mean vertical or horizontal spacing.) In any case, removing the sup markup and the related styling should help. The registered sign ® is meant to be displayed more or less as a superscript-like glyph, so making it a superscript easily turns it small beyond legibility (and perhaps somewhat misplaced).

Remove space between text and sup reference /sup when text is justified

The solution is the one suggested by Vitorino Fernandes in a comment that has been removed. I hope he hasn't been victim of an arbitrary removal of his post just as I have recently been from stack exchange team (who shoot first and ask questions later).

Since he seems no longer there, I hereby reproduce his answer:

To solve the issue I have to set the <sup> tag as inline-block. It is as simple as that. Then everything is displayed correctly. I have already implemented the solution.

Full CSS code includes:

display: inline-block;
vertical-align: super; 
font-size: 60%;

HTML sup / tag affecting line height, how to make it consistent?

line-height does fix it, but you might have to make it pretty large: on my setttings I have to increase line-height to about 1.8 before the <sup> no longer interferes with it, but this will vary from font to font.

One possible approach to get consistent line heights is to set your own superscript styling instead of the default vertical-align: super. If you use top it won't add anything to the line box, but you may have to reduce font size further to make it fit:

sup { vertical-align: top; font-size: 0.6em; }

Another hack you could try is to use positioning to move it up a bit without affecting the line box:

sup { vertical-align: top; position: relative; top: -0.5em; }

Of course this runs the risk of crashing into the line above if you don't have enough line-height.

Superscript does not align in outlook 2011

I fixed this issue by increasing theline-height of the containing paragraph <p>

Reducing hight of superscript in HTML by css

Instead of the default vertical-align: sup; you could change it to top and adjust the position with top and minus value;

sup { 
    vertical-align: top; 
    position: relative;
    top:  -0.2em; 
}

Horizontal spaces between subscript and regular text HTML

Here you go...

All this mess was solved by making a div with an id='wrapper' and then putting inside all your text elements. If you put these text elements outside of the wrapper they will be placed one over the other thus creating a mess you were describing. Also, subscript doesn't work.

So, set position: relative; to the textwithblurredbg, set position: absolute; to the wrapper and then put all your text elements inside the wrapper. Consequently:

your text elements are now positioned one after the other (not one over the other) and
subscript now works.

Also, I simplified your CSS a little bit.

.textwithblurredbg {
  position: relative;
  width: 300px;
  margin: 8px;
}

.textwithblurredbg img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  transition: 0.3s;
}

#wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  padding: 25px;
  color: white;
  transition: 0.3s;
  opacity: 0;
}

.textwithblurredbg:hover img {
  filter: blur(2px) brightness(60%);
  box-shadow: 0 0 16px #A0C1D5;
}

.textwithblurredbg:hover #wrapper {
  opacity: 1;
}

<!DOCTYPE html>
<html lang='en'>

<head>

  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>

</head>

<body>

  <div class='textwithblurredbg'>
    <img src='https://groups.chem.ubc.ca/chem_stockroom/images/Acetic Acid 2.0M.jpg'>
    <div id='wrapper'>
      <h3>Acetic Acid Solution 2.0M</h3>
      <h5>Molecular Formula: C<sub>2</sub>H<sub>4</sub>O<sub>2</sub> or CH<sub>3</sub>COOH</h5>
      <h5>Formula Weight: 60.05 g/mol<br>Appearance: Colourless, clear liquid<br><br>Safety: Can cause burns/blisters if comes into contact with skin.</h5>
    </div>
  </div>

</body>

</html>

HTML Superscript & Subscript Issue

You might want simplify things using flex:

body {

  font-size: 48px

}

.element {

  display: inline-flex;

  flex-flow: column wrap;

  justify-content: center;

  align-items: flex-end;

  height: 1.5em;

  line-height: 1.3

}

.element > * {

  font-variant: normal;

  font-size: .75em;

  line-height: 1;

}

.element>*:nth-child(3),

.element>*:nth-child(4) {

  align-self: flex-start

}

<span class="element">

  <sup>238</sup>

  <sub>92</sub>

  U

  <sup>3-</sup>

  <sub>1</sub>

</span>

Getting Rid of Space with the Superscript in HTML Emails