Superscript and line-height

Applying superscript both through CSS or HTML tag affects line height.

HTML

<p>
  <em>HTML superscript:</em>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, lacus ut imperdiet molestie, ipsum risus lobortis nisl, vulputate egestas orci nibh quis nibh. Nulla non ornare ex. Praesent lacinia lobortis elementum. Nullam tempor lectus vitae<sup>tag-superscript</sup> felis ullamcorper faucibus. Nam sit amet faucibus lorem. Integer sodales rutrum lectus non tempor. Pellentesque maximus risus neque, eu egestas ligula dignissim quis.
</p>
<p>
  <em>CSS superscript:</em>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, lacus ut imperdiet molestie, ipsum risus lobortis nisl, vulputate egestas orci nibh quis nibh. Nulla non ornare ex. Praesent lacinia lobortis elementum. Nullam tempor lectus vitae<span class="super">css-superscript</span> felis ullamcorper faucibus. Nam sit amet faucibus lorem. Integer sodales rutrum lectus non tempor. Pellentesque maximus risus neque, eu egestas ligula dignissim quis.
</p>
<p>
  <em>CSS superscript: fix#1 with 'line-height: 1px;'</em>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, lacus ut imperdiet molestie, ipsum risus lobortis nisl, vulputate egestas orci nibh quis nibh. Nulla non ornare ex. Praesent lacinia lobortis elementum. Nullam tempor lectus vitae<span class="super minheight">css-superscript-fix#1</span> felis ullamcorper faucibus. Nam sit amet faucibus lorem. Integer sodales rutrum lectus non tempor. Pellentesque maximus risus neque, eu egestas ligula dignissim quis.
</p>
<p>
  <em>CSS superscript: fix#1 problem#1</em>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, lacus ut imperdiet molestie, ipsum risus lobortis nisl, vulputate egestas orci nibh quis nibh. Nulla non ornare ex. Praesent lacinia lobortis elementum. Nullam tempor lectus vitae<span class="super minheight big">fix#1</span> felis ullamcorper faucibus. Nam sit amet faucibus lorem. Integer sodales rutrum lectus non tempor. Pellentesque maximus risus neque,...

CSS

em {
  display: block;
  font-weight:bold;
}

.super {
  font-size: .83em;
  vertical-align: super;
}

.minheight {
  line-height: 1px;
}

.big {
  font-size: 50px;
  vertical-align: super;
}

img {
  display: inline;
  overflow: hidden;
}