CODEWITHSUNDEEP
htmlcssinput
someRandomAlt
someRandomAlt

Reputation: 3

How to fix input and button alignment

My issue is that there is a 1px gap in the alignment. If you see closely the search icon btn is 1 px above of search box, how Do i fix it? I need both to be same alignment.

screenshot

I tried to set same height, but it didn't work.

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>

Upvotes: 0

Views: 50

Answers (1)

MenTalist
MenTalist

Reputation: 141

{ margin-top : "5px" } or { padding-top : "5px" }

Upvotes: 1

Related Questions