Geek Answers Handbook

I cannot remove the border between two input fields

I am trying to remove the border between the search bar and "Go!". at the top of this page: http://beta.linksku.com/

I tried to remove all styles and add margin:0;padding:0;border:none; but there is still a difference between the two elements. I cannot reproduce this problem on JSFiddle, but this happens in all browsers on my site.

+7
source share
5 answers

This is how inline-block elements work.

Usually, when you use inline-block elements, you often use them inside a paragraph, so the space between the letters should be consistent. inline-block elements also apply to this rule.

If you want to completely remove the space, you can move the elements.

 float: left;

You can also remove spaces from your template document. For example:

 <input type="text" name="s" tabindex="2" /><input type="submit" value="Go!" class="btn" />
+27
source

The space you see is the default padding applied to inline elements. The easiest hack? Set font-size: 0 to form , then reset the actual font size of the input and button.

Magic.

 form { font-size: 0; } form input { font-size: 12px;

Why is this happening? The browser interprets the space between input as text space and displays accordingly. You can also grease all your elements on the same line, but this ugly soup is from code.

+5
source

This is a space relative to the font size. You can remove it by adding font-size:0 to the container of your inputs, in this case, this form:

 form { font-size: 0; }
+1
source

Using chrome on a Mac, I can get rid of the gap by editing the node form as HTML in the developer tools and removing the gap between the two closing tags so that:

 <form id="search" method="get" action="http://beta.linksku.com/"> <input type="text" name="s" tabindex="2"> <input type="submit" value="Go!" class="btn"> </form>

becomes:

 <form id="search" method="get" action="http://beta.linksku.com/"> <input type="text" name="s" tabindex="2"><input type="submit" value="Go!" class="btn"> </form>
+1
source

One way is to remove the space, but if you don't want to have an unreadable mess on one line, you can use an HTML comment:

 <form id="search" method="get" action="http://beta.linksku.com/"> <input type="text" name="s" tabindex="2"><!-- !--><input type="submit" value="Go!" class="btn"> </form>
0
source

More articles:


All Articles