Search, input, button margin and padding

Admin 1
Viewed 209

I would like to remove the space between <input> and <button>.

In the CSS, I tried with padding: input, button {padding : 0px}, but it didn't work.

<form action="search">
  <div class="input-search">
    <span class="input-icon">
      <i class="fas fa-map-marker-alt"></i>
    </span>

    <input type="text" placeholder="Los Angeles" />
    <button type="submit">
      <strong>Search</strong>
    </button>
  </div>
</form>

css-transitions forms margin css html
2 Answers

margin-left: -1em; maybe?

Margin can have negative value...

button{
  margin-left: -1em;
}
<form action="search">
  <div class="input-search">
    <span class="input-icon">
      <i class="fas fa-map-marker-alt"></i>
    </span>

    <input type="text" placeholder="Los Angeles" /> <button type="submit"><strong>Search</strong></button>
  </div>
</form>

user_21595280

You can add the input-search div style display:flex.

<form action="search">
  <div class="input-search" style="display:flex;">
    <span class="input-icon">
      <i class="fas fa-map-marker-alt"></i>
    </span>

    <input type="text" placeholder="Los Angeles" /> <button type="submit"><strong>Search</strong></button>
  </div>
</form>

user_50653010
Related