Set vertical-align to 300% in HTML and CSS

Description

The following code shows how to set vertical-align to 300%.

Example


<html>
<head>
<title>vertical-align</title>
<style type='text/css'>
p {<!--   w w  w  .j a v a  2 s  .c  o m-->
font: 12px sans-serif;
}
p#control {
font-size: 100px;
margin: 5px 0;
}
p#control span {
border: 1px solid rgb(200, 200, 200);
background: rgb(244, 244, 244);
}
p#control span span {
vertical-align: 300%;
font-size: 20px;
background: white;
border: 1px solid black;
}
</style>


</head>
<body>
<p>
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
</p>
<p id='control'>
<span>Nn Oo Pp <span>300%</span></span>
</p>
<p>
Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
</p>
</body>
</html>

Click to view the demo

The code above generates the following result.

Set vertical-align to 300% in HTML and CSS

Home »
  HTML CSS Tutorial »
    Text »
      CSS Text Style

...
Set paragraph line-height to 150% in HTML a...
Compare text-align all possible values in H...
Set text-align to center in HTML and CSS
Set text-align to justify in HTML and CSS
Set text align to justify to paragraph in H...
Set text-align to left in HTML and CSS
Set text-align to right in HTML and CSS
Compare text-decoration in HTML and CSS
Set text-decoration to line-through in HTML...
Set text-decoration to none for visited anc...
Set text-decoration to overline in HTML and...
Set text-decoration to underline in HTML an...
Set text-decoration to underline overline i...
Set text-decoration to underline overline l...
Compare text-transform in HTML and CSS
Set text-transform to capitalize in HTML an...
Set text-transform to lowercase in HTML and...
Set text-transform to uppercase in HTML and...
Compare all vertical-align settings in HTML...
Compare vertical-align possible values in H...
Compare vertical align values in HTML and C...
Set vertical align for table cells in HTML ...

Set vertical-align to 300% in HTML and CSS