项目场景：

最近在写一个网站的时候觉得单调了，然后我就在一个input框的右边加入了阿里的iconfont字体图标，结果神奇的事情发生了...

---

问题描述

如下图所示，这是还没在输入框右边加入icon图标的情况，可以看到是正常的：

当我加入了一个button按钮里边放置了icon图标之后，可以看到好像还是正常的： 

 接下来我嫌图标太小了，我就调了以下icon的大小，然后就变成了下面这样：

---

原因分析：

我当时下意识的去调输入框的位置，给输入框添加了内外边距，但是都没有效果，如图所示：

 接下来我调了半天都没有任何作用，突然灵光一闪，想到icon图标其实被认为是字体了，而不是一张图，我这才反应过来两个盒子内的字体会根据两边字体的底部进行对齐，这样的话就影响到了两个盒子之间的布局，除非两个盒子设置的字体样式大小是一样的，那么就不会出现这种情况！

---

解决方案：

找到了原因就好解决了，除了上面说的设置大小一致可以解决以外，我们可以设置下输入框的vertical-align垂直对齐方式为top，使它的顶端与行中最高元素的顶端对齐，效果如下图：

vertical-align: top;

发现已经对齐了，perfect~

🥇原创不易，还希望各位大佬支持一下！
👍点赞，你的认可是我创作的动力 ！
🌟收藏，你的青睐是我努力的方向！
✏️评论，你的意见是我进步的财富！