CODEWITHSUNDEEP
css
Miguel Moura
Miguel Moura

Reputation: 39524

Margin in Button different in browsers

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

Answers (2)

Vucko
Vucko

Reputation: 20844

Remove the line-height:1 and put margin:0 to form input.

JSFiddle

To make it to look the "same" in every browser, use normalize.

JSBin - tested in IE10, safari, firefox and chrome.

Upvotes: 1

Evan Mulawski
Evan Mulawski

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

Related Questions