How to remove the space between Text Input and Submit Button?

Question

Why's there a space between my submit and search field? How do I get rid of this?

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
        <span class="screen-reader-text">Search for:</span>
        <input type="search" class="search-field" placeholder="Search..." value="" name="s" title="Search for:" />
    </label>
    <input type="submit" class="search-submit" value="Search" />
</form>

fiddle

Because there are spaces in the code between those things. There are [ways around that](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) but it's generally easiest to just remove the spaces from the code. — Dan, Aug 23 '14 at 01:07
possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Dan, Aug 23 '14 at 01:07
Here's a fiddle http://jsfiddle.net/jv655whz/ - and here is a link - http://css-tricks.com/fighting-the-space-between-inline-block-elements/ — TimSPQR, Aug 23 '14 at 01:16

score 5 · Accepted Answer · answered Aug 23 '14 at 01:14

5

Simply put them together :)

<label>
    <span class="screen-reader-text">Search for:</span>
    <input type="search" class="search-field" placeholder="Search up in hur" value="" name="s" title="Search for:" /></label><input type="submit" class="search-submit" value="Search" />

answered Aug 23 '14 at 01:14

ydoow

2,969
4
24
40

2

how would one achieve this in pug/jade? – snow Oct 13 '17 at 07:52

score 1 · Answer 2 · answered Aug 23 '14 at 01:47

In order to achieve this target, first of all put the Button just after Textbox:

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
        <span class="screen-reader-text">Search for:</span>
        <input type="search" class="search-field" placeholder="Search up in hur" value="" name="s" title="Search for:" /><input type="submit" class="search-submit" value="Search" />
    </label>
</form>

Then use this CSS to remove remain space:

.search-field, .search-submit{
    margin:0;
}

Now there are no space between Button and TextBox but you can see 2px border between them to solve this issue you can add this CSS too:

.search-field + .search-submit{
    border:1px solid #a9a9a9;
    border-left:0px;
    height:22px;
}

This CSS cause that when a search-submit place just after a search-field the left border disappear. So The final result is like this:

enter image description here

Check JSFiddle Demo

score 1 · Answer 3 · answered Apr 21 '16 at 10:05

1

no need for css just remove indentation or spaces btw the two or more elements and places them on one line

answered Apr 21 '16 at 10:05

someOne

11
1

score 0 · Answer 4 · answered Aug 23 '14 at 01:12

0

Adding this to your CSS will address the issue:

label {
    display:inline-block; 
    width: 212px;
}

JS Fiddle Demo

The styling is not very pretty...that's why I use bootstrap. There are built in classes for this in bootstrap.

answered Aug 23 '14 at 01:12

Dan

9,391
5
41
73

How to remove the space between Text Input and Submit Button?

4 Answers4