Reputation: 39524
I created a responsive search form as follows:
<form class="search" action="#" method="get">
<input type="search" id="search">
<input type="submit" name="submit" value="search">
</form>
I have an example in http://codepen.io/mdmoura/pen/eKALE
In Firefox looks exactly as I expected ...
But in Google, Chrome and Safari there is a 1px gap on top and bottom of the button.
How can I make it look the same in every browser?
Thank you, Miguel
Upvotes: 0
Views: 65
Reputation: 20844
Remove the line-height:1
and put margin:0
to form input
.
To make it to look the "same" in every browser, use normalize.
JSBin - tested in IE10, safari, firefox and chrome.
Upvotes: 1
Reputation: 55354
The computed height of the search box is 34px, which is 2px higher than the button (you can change the padding of the search box to 7px instead of 8px to fix that).
In addition, both the search input and the button are inline-block
, which will cause a gap between the elements. To remove that gap, remove any whitespace between them in your source:
<form class="search" action="#" method="get">
<input type="search" id="search"><input type="submit" name="submit" value="search">
</form>
Upvotes: 0