视觉上如何让不同 font-size 的文字底部在一条线上？

自己尝试了下，发现都不能让文字底部完全在一条线上，中文更加明显，
不知应该如何解决
测试用例

css css3

阅读 19.1k

4 个回答

中文也可以，你需要强制对不同大小的字体设定不同的行高。

<div class="a inline">
  <div class="b">哈哈</div>
  <span class="b">嘎嘎</span>
  <b class="b">呱呱</b>
  <div class="b e1">haha</div>
  <span class="b e2">gaga</span>
  <b class="b e3">guagua</b>
</div>

.a {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid lightblue;
  margin: 40px auto;
}
.inline .b {
  display: inline;
  vertical-align: bottom;
}
.a div {
  font-size: 20px;
  line-height: 20px;
}
.a span {
  font-size: 40px;
  line-height: 37px;
}
.a b {
  line-height: 15px;
}
.b.e1 {
  line-height: 16px;
}
.b.e2 {
  line-height: 46px;  
}
.b.e3 {
  line-height: 18px;
}

最终效果如下：

以上为手工调整line-height的结果。如果不想手工调整，而想自动计算的话，代码如下：

<div class="a inline">
  <div class="b c1">哈哈</div>
  <div class="b c2">嘎嘎</div>
  <div class="b c3">呱呱</div>
  <div class="b e1">haha</div>
  <div class="b e2">gaga</div>
  <div class="b e3">guagua</div>
</div>

.a {
  border-bottom: 1px solid lightblue;
}
.inline .b {
  display: inline;
  vertical-align: bottom;
  line-height: 1;
}
.a .c1 {
  font-size: 40px;
}
.a .c2 {
  font-size: 80px;
}
.a .c3 {
  font-size: 20px;
}
.a .e1 {
  font-size: 40px;
}
.a .e2 {
  font-size: 80px;
}
.a .e3 {
  font-size: 20px;
}

效果也还可以，英文的出入比较大，中文略有差距：

yszou

4.9k2718

发布于
2018-01-25

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>底部</title>
</head>
<body>
  <div style="border-bottom: 1px solid blue;">
    <span style="font-size: 12px; vertical-align: bottom;">哈哈</span>
    <span style="font-size: 14px; vertical-align: bottom;">哈哈</span>
    <span style="font-size: 16px; vertical-align: bottom;">哈哈</span>
    <span style="font-size: 18px; vertical-align: bottom;">哈哈</span>
    <span style="font-size: 28px; vertical-align: bottom;">哈哈</span>
    <span style="font-size: 38px; vertical-align: bottom;">哈哈</span>
  </div>
</body>
</html>