CODEWITHSUNDEEP
htmlcss
user14341744
user14341744

Reputation:

Initial styling of <sup> and <sub> tags

So I've recently realized that a lot (basically all) html tags that reside in the body are basically text tags with some styling:

e.g

a {
    color: blue; /*of some sort*/
    text-decoration: underline;
}

b {
    font-weight: 700;
}

So I was curious. For the <sup> and <sub> tags, I was wondering, how can I shift text upwards inline? It would be interesting to do something where you have wavy text. So in another way of saying this, what is the initial styling of the <sup> and <sub> tags?

Edit: It would also be nice for me to be able to play with these

Upvotes: 0

Views: 1018

Answers (2)

dippas
dippas

Reputation: 60563

The default styles for both tags are the following:

small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }

You can see more info here

Edit: It would also be nice for me to be able to play with these

Just use the tags.

<div>
  <sup>1</sup>
  <sub>2</sub>
  <sup>3</sup>
  <sub>4</sub>
</div>
<hr />
<div>
  <sup>a</sup>
  <sub>b</sub>
  <sup>c</sup>
  <sub>d</sub>
</div>

Upvotes: 2

corn on the cob
corn on the cob

Reputation: 2282

Here is the default style for the sup tag:

sup {
    font-size: smaller;
    vertical-align: super;
}


.sup {
  font-size: smaller;
  vertical-align: super;
}
<p>E = mc<sup>2</sup> - or does it?</p>
<p>E = mc<span class="sup">2</span> - or does it?</p>

Here is the default style for the sub tag:

sup {
    font-size: smaller;
    vertical-align: sub;
}


.sub {
  font-size: smaller;
  vertical-align: sub;
}
<p>E = mc<sub>2</sub> - or does it?</p>
<p>E = mc<span class="sub">2</span> - or does it?</p>

So yup, that means we can do this:

.a {
  font-size: smaller;
  vertical-align: sub;
}
.b {
  font-size: smaller;
  vertical-align: text-bottom;
}
.c {
  font-size: smaller;
  vertical-align: middle;
}
.d {
  font-size: smaller;
  vertical-align: text-top;
}
.e {
  font-size: smaller;
  vertical-align: super;
}
<p>Yay! 
    <span class="a">u</span>
    <span class="b">n</span>
    <span class="c">i</span>
    <span class="d">c</span>
    <span class="e">o</span>
    <span class="d">r</span>
    <span class="e">n</span>
    <span class="c">s</span>
</p>

If you ever wanted to use numerical values for the vertical-align, those would work as well, like this:

.a {
  font-size: smaller;
  vertical-align: 0px;
}
.b {
  font-size: smaller;
  vertical-align: -2px;
}
.c {
  font-size: smaller;
  vertical-align: -4px;
}
.d {
  font-size: smaller;
  vertical-align: -2px;
}
.e {
  font-size: smaller;
  vertical-align: 0px;
}
.f {
  font-size: smaller;
  vertical-align: 2px;
}
.g {
  font-size: smaller;
  vertical-align: 4px;
}
.h {
  font-size: smaller;
  vertical-align: 2px;
}
.i {
  font-size: smaller;
  vertical-align: 0px;
}
<p>Yay! 
    <span class="a">r</span>
    <span class="b">a</span>
    <span class="c">i</span>
    <span class="d">n</span>
    <span class="e">b</span>
    <span class="f">o</span>
    <span class="g">w</span>
    <span class="h">s</span>
    <span class="i">a</span>
    <span class="h">n</span>
    <span class="g">d</span>
    <span class="f">u</span>
    <span class="e">n</span>
    <span class="d">i</span>
    <span class="c">c</span>
    <span class="b">o</span>
    <span class="a">r</span>
    <span class="b">n</span>
    <span class="c">s</span>
</p>

Upvotes: 1

Related Questions