How to fix the spacing between my input and button?

Question

I have an input tag for a search bar and a button to the right where users can click to hit enter. However, there's a spacing between the search box and the button and I'm not able to find out why. I tried using chrome's inspect element to find out if the reason if because of some misplaced padding-left/right but nothing indicates that, so I'm not sure why.
Here's my html and css

.left-nav input[type=text] {
  background-color: #2B2B2B;
  margin-left: 50px;
  padding: 8px;
  border: none;
  border-radius: 8px 0px 0px 8px;
  font-size: 17px;
}

.left-nav ::placeholder {
  padding-left: 6px;
}

.left-nav button {
  padding: 11px 15px;
  background: rgb(184, 184, 184);
  border: none;
  border-radius: 0px 8px 8px 0px;
  cursor: pointer;
}

<div class="left-nav">
  <input type="text" placeholder="Search...">
  <button type="submit"><i class="fas fa-search fa-lg" ></i></button>
</div>

How it's currently showing

The margin calls are all for left aspect, which positions my button where I want it on my webpage, so this shouldn't affect the right aspect of the button itself. However, I did try reducing the values and this didn't work — Nanjana, May 27 '20 at 04:12
You could move the margin attributes to the root element which is the `div.left-nav` and then have another margin set for the button inside the parent div. Your outer div margin would handle the webpage alignment and this would help with the button alignment inside the div. — v1shnu, May 27 '20 at 04:16
Adding a `margin-left: -4px;` to `.left-nav button` in your snippet removed the extra space. — v1shnu, May 27 '20 at 04:18
I was thinking of doing the -px but I was unsure whether this was good practice? — Nanjana, May 27 '20 at 04:20

score 2 · Answer 1 · answered May 27 '20 at 04:26

2

Place your input and button in one line. Then, the spacing shall be removed.

body {
  background-color: darkSlateGray;
}

.left-nav input[type=text] {
  margin-left: 50px;
  padding: 8px;
  border: none;
  border-radius: 8px 0px 0px 8px;
  font-size: 17px;
}

.left-nav ::placeholder {
  padding-left: 6px;
}

.left-nav button {
  padding: 11px 15px;
  background: rgb(184, 184, 184);
  border: none;
  border-radius: 0px 8px 8px 0px;
  cursor: pointer;
}

<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<div class="left-nav">
  <input type="text" placeholder="Search..."><button type="submit"><i class="fas fa-search fa-lg" ></i></button>
</div>

answered May 27 '20 at 04:26

yinsweet

2,696
1
7
18

This worked! Why did it leave a space just because the tags where in separate lines? – Nanjana May 27 '20 at 04:31
1

a line break between the element count as a space – yinsweet May 27 '20 at 04:34
@yinsweet This is interesting! – ABGR May 27 '20 at 04:42
@yinsweet I don't agree with that fact of a line break. It is because of inline elements. as Gerald has answered the ques. – Sandesh Sapkota May 27 '20 at 04:44
@SandeshSapkota You are right. It is because of the line break between the **inline elements** causing a space. – yinsweet May 27 '20 at 04:59

score 1 · Answer 2 · answered May 27 '20 at 04:30

The problem is related to the space between inline-block elements. There are several ways to fix this of which I would recommend making .left-nav a flexbox.

.left-nav {
  display: flex;
}

.left-nav input[type=text] {
  background-color: #2B2B2B;
  margin-left: 50px;
  padding: 8px;
  border: none;
  border-radius: 8px 0px 0px 8px;
  font-size: 17px;
}

.left-nav::placeholder {
  padding-left: 6px;
}

.left-nav button {
  padding: 11px 15px;
  background: rgb(184, 184, 184);
  border: none;
  border-radius: 0px 8px 8px 0px;
  cursor: pointer;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<div class="left-nav">
  <input type="text" placeholder="Search...">
  <button type="submit"><i class="fas fa-search fa-lg" ></i></button>
</div>

score 0 · Answer 3 · answered May 27 '20 at 04:21

0

Try adding a margin to your button like below:

.left-nav button {
  padding: 11px 15px;
  background: rgb(184, 184, 184);
  border: none;
  border-radius: 0px 8px 8px 0px;
  cursor: pointer;
  margin-left: -4px;
}

You can adjust the margin based on what you see on your screen (as this value is what did the work in your snippet.)

answered May 27 '20 at 04:21

v1shnu

2,038
8
26
57

That's not the question. The question is why it's happening at the first place. – ABGR May 27 '20 at 04:25
The issue is due to inline-blocks giving extra spacing between two items. – v1shnu May 27 '20 at 04:31

score 0 · Answer 4 · answered May 27 '20 at 04:40

The line feed between the and creates a space between them on the page. You have to remove the line feed, or use this trick this will remove the space without having margin-left as negative.

.left-nav input[type=text] {
  background-color: #2B2B2B;
  margin-left: 50px;
  padding: 8px;
  border: none;
  border-radius: 8px 0px 0px 8px;
  font-size: 17px;
  display: inline;
}

.left-nav ::placeholder {
  padding-left: 6px;
}

.left-nav button {
  display: inline;
  padding: 11px 15px;
  background: rgb(184, 184, 184);
  border: none;
  border-radius: 0px 8px 8px 0px;
  cursor: pointer;
}

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div class="left-nav">
  <input type="text" placeholder="Search...">
  <button type="submit"><i class="fas fa-search fa-lg" ></i></button>
</div>
<br>

<!--the Problem is the line feed you can remove it or add this comment btw them-->
<div class="left-nav">
  <input type="text" placeholder="Search..."><!--
    --><button type="submit"><i class="fas fa-search fa-lg" ></i></button>
</div>

<!--Hope this helps-->

How to fix the spacing between my input and button?

4 Answers4