html inline元素的对齐方式和高度问题？
先看图：
主要问题是：怎么让左边黑色inline和右边的文字垂直居中，并且黑色inline中的文字也垂直居中？
html如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
max-width: 300px;
font-size: 32px;
line-height: 50px;
border: 1px solid black;
}
.tag {
display: inline;
color: white;
background: black;
}
.tag-inner {
font-size: 16px;
}
</style>
</head>
<body>
<div style="margin: 100px">
<div class="container">
<span class="tag">
<span class="tag-inner">哈哈</span>
</span>
<span>噜噜噜噜</span>
</div>
</div>
</body>
</html>再尝试解决的过程中，又碰到几个有疑问的点：
为什么container的高度是58px？行高设置了50px，边框1px，那正常应该是52px才对吧，在把tag元素去掉后，container的高度确实是回到了正确的52px。并且如果减小
tag-inner的font-size，container的高度反而会增加，这点又是为什么，和文本对齐方式有关吗？因为我发现给tag-inner设置vertical-align: middle之后，font-size的减小时不会再增加container的高度
为什么给tag-inner元素设置vertical-align: text-bottom的表现，反而是往上移动的感觉，不应该是往下移动吗？（这里为方便看位置，调大了tag元素的font-size）
主要问题
最简单粗暴的解决方案就是外部容器的 display 设置为 flex 布局。然后设置 align-items 为 center 就好了。
使用 line-height 和 vertical-align 两个属性对其中文文本的时候都因为中文字体没有的基线和中线概念的问题（我印象中中文字体是没有基线概念的）导致没有办法很完美的做好文本内容的垂直居中（主要是中文和英文混排的场景下）。
关于基线和部分的问题可以看张鑫旭大佬早期的一篇文章 👉 我对CSS vertical-align的一些理解与认识（一） « 张鑫旭-鑫空间-鑫生活
问题1： 为什么 .container 的高度是 58px ？
因为默认的 vertical-align 属性就是按照 baseline，也就是主要问题中提到的基线 来对齐的。 .tag-inner 元素的 font-size 越小，基线也就越靠下，有因为设置了固定的 line-height:50px，因为 vertical-align: baseline 基线对齐的缘故，自然外部容器 .container 的高度会越来越大。所以你给 .tag-inner 元素的 vertical-align 属性设置为 middle 时候就不会增加高度了也是这个缘故。
问题2： 为什么给 .tag-inner 元素设置 vertical-align:text-bottom 的表现，反而是往上移动的感觉？
你看一下这个配图里面的 text-bottom （底线）的位置你就明白为啥了。
相关阅读
- 经过验证的有效解决办法
- 自己的经验指引，对解决问题有帮助
- 遵循 Markdown 语法排版，代码语义正确
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容