文档
语法
vertical-align: <value>;
可选值:
我们知道,化学元素需要按照如下的格式才能正确显示,不过会将原有的字体高度撑开
实现效果
实现代码
<style>
.box {
font-size: 20px;
line-height: 1;
background-color: green;
color: #fff;
}
.mini {
font-size: 12px;
}
.title {
font-size: 20px;
}
.text-bottom {
vertical-align: text-bottom;
}
.text-top {
vertical-align: text-top;
}
.sub {
vertical-align: sub;
}
.super {
vertical-align: super;
}
.top {
vertical-align: top;
}
.bottom {
vertical-align: bottom;
}
</style>
<div class="title">默认</div>
<div class="box">
<span>H2O2</span>
</div>
<div class="title">text-bottom、text-top</div>
<div class="box">
<span>H2O2</span>
<span>H<span class="mini text-bottom">2</span>O<span class="mini text-top">2</span></span>
</div>
<div class="title">sub、super</div>
<div class="box">
<span>H2O2</span>
<span>H<span class="mini sub">2</span>O<span class="mini super">2</span></span>
</div>
<div class="title">bottom、top</div>
<div class="box">
<span>H2O2</span>
<span>H<span class="mini bottom">2</span>O<span class="mini top">2</span></span>
</div>