CODEWITHSUNDEEP
htmlcss
Wowsk
Wowsk

Reputation: 3675

Button and input heights are different after setting to the same amount

I created this JSFiddle here and if you notice the button and input heights are different when they should be the same (40px). If you add 6px to the buttons height though they are the same. First of all is there a fix to this, such as margin or padding and why is it that this occurs? I have tried it on Firefox and Google Chrome and both turn out the same way.

HTML:

<input id="input" class="sameHeight">
<button id="button" class="sameHeight">Button</button>

CSS:

.sameHeight{
    height:40px;
}

Upvotes: 0

Views: 60

Answers (2)

Marco Hengstenberg
Marco Hengstenberg

Reputation: 864

In addition to what cs.edoardo wrote you should watch out for possible Firefox quirks:

/*
  Getting rid of the extra 2px padding for submit
  buttons and inputs in Firefox 4+.
  Whoever thought that was fun to implement... Òó grmlhmpfargh
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

Upvotes: 1

cs.edoardo
cs.edoardo

Reputation: 544

Yes you can with:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

This should help

More info about box-sizing here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Upvotes: 3

Related Questions