极客观点
项目管理
HarmonyOS
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
#btn {
background: #f00;
margin: 0;
border: 0;
padding: 0 15px;
display: block;
line-height:55px;
}
#icon {
background: #000;
color: #fff;
line-height: 55px;
display: inline-block;
vertical-align: middle;
}
</style>
<button id="btn"><span id="icon">hello<span></button>
</body>
</html>最终的效果却是下面这样：
仔细观察，父元素顶部多了1px
这是什么原因导致的。
其实我不太关心这个问题怎么可以解决，而是关心这个问题出现的原因。
垂直对齐的问题，改成
你可以参考下这个 CSS深入理解vertical-align和line-height的基友关系
如果你尝试了各种
vertical-align，你会有更多惊喜。