How to remove space between button and input

Question

this is the html code here is not css and it has space between the button and input search

<div class="search-engine-container">
   <i class="search icon"></i>
   <input type="text" id="search_input" placeholder="...البحث عن المنتجات">
   <button id="clear-search-engine">x</button>
</div>

this how it looks like

Remove the white space characters (spaces and new lines) between the tags in the HTML. — Quentin, Apr 07 '22 at 14:10
you are not saying much if you don't include the css. Anyway maybe set margin: 0 on both elements (input and button)? — Diego D, Apr 07 '22 at 14:11
Include CSS if you want us to be able to show you whats wrong here. — Stoff, Apr 07 '22 at 14:13
in the css I m only setting ```border: 1px solid blue``` to search-engine-container — Ḉớᶑẽr Ħậꞣǐɱ, Apr 07 '22 at 14:17

score 4 · Answer 1 · answered Apr 07 '22 at 14:12

an idea can be to use position of button inside container

if container position is relative you can set button to position absolute

.search-engine-container {
  position: relative;
}

.search-engine-container button {
  position:absolute;
}

<div class="search-engine-container">
        <i class="search icon"></i>
        <input type="text" id="search_input" placeholder="...البحث عن المنتجات">
        <button id="clear-search-engine">x</button>
</div>

score 1 · Answer 2 · answered Apr 07 '22 at 14:17

You can add display: flex; to your .search-engine-container class.

.search-engine-container {
  display:flex;  
}

<div class="elm"></div>
<div class="search-engine-container">
    <i class="search icon"></i>
    <input type="text" id="search_input" placeholder="...البحث عن المنتجات">
    <button id="clear-search-engine">x</button>
</div>

score 0 · Answer 3 · answered Apr 07 '22 at 14:21

A way is seting margin:

button{
  margin: -5px;
}

<div class="search-engine-container">
        <i class="search icon"></i>
        <input type="text" id="search_input" placeholder="...البحث عن المنتجات">
        <button id="clear-search-engine">x</button>
</div>

score -1 · Answer 4 · answered Apr 07 '22 at 14:29

-1

the probem was in the white space We can remove white space by setting parent element font-size to 0 and child elements font-size to 17px

answered Apr 07 '22 at 14:29

Ḉớᶑẽr Ħậꞣǐɱ

180
1
6

score -1 · Answer 5 · answered Apr 07 '22 at 14:38

-1

The space is probably because of the margin around the input or around the button to remove it use the code below:

#search_input {
    margin: 0;
}
#clear-search-engine {
    margin: 0;
}

If this didn't work then the problem isn't because of margin but you still can fix it using margin:

#search_input {
        margin-right: -5px;
}

And you can adjust the number of pixels as you want.

answered Apr 07 '22 at 14:38

Abdelrhman Mohamed

19
2

no there is no margin it's because the white space I fix it think you :) – Ḉớᶑẽr Ħậꞣǐɱ Apr 07 '22 at 14:49

How to remove space between button and input

5 Answers5