如何修复输入和按钮 alignment

Question

我的问题是 alignment 中有 1px 的间隙。如果仔细观察搜索图标 btn 在搜索框上方 1px，我该如何解决？ 我需要两者都相同 alignment。

我试图设置相同的高度，但没有用。

 input { border-radius: 10px 0 0 10px; border-right: none; border: solid #D9D9D9; height: 30px; } button { height: 30px; border-radius: 0 10px 10px 0; border: solid; }.bg-grey { background: lightgrey; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <input class="addFont bg-grey" placeholder="What is your mood?" style={{ borderRadius: "10px 0 0 10px", borderRight: "none", border: "solid #D9D9D9", height: "30px" }}/> <button class="bg-grey" style={{ height: "30px", borderRadius: "0 10px 10px 0", border: "solid" }}><i class="fa fa-search"></i></button>

Answer 1

{ margin-top: "5px" } 或者 { padding-top: "5px" }