html - Even height on divs with and without a border

Question

Can i make two buttons with 1em padding - one with a background color and other with a border, to have the same height? Basically to have the border inside of the div.

Tried to use box-sizing: border-box; method, but that didnt solve my problem.

Html:

<div class="button1">Button1</div>
<div class="button2">Button2</div>

CSS:

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.button1 {
    padding: 1em;
    border-style: solid;
    border-color: #666;
    border-width: 4px;
    display: inline-block;
}

.button2 {
    padding: 1em;
    background-color: #e54;
    display: inline-block;
}

Can't wrap my head around it, seemed like a logical solution. Thanks in advance.

Answer 1

give .button2 a border with a color identical to its background-color.

Fiddle showing this: JS Fiddle

Answer 2

Do the following

.button1 {
   outline: solid #666 4px;
}

Remove other border details.

Answer 3

You could use the calc function in CSS to add the 4px of padding to the second button. This won't put the border inside the div, but rather adjust the padding on the second div to match the first...

.button2 {
  padding: calc(1em + 4px);
  background-color: #e54;
  display: inline-block;
}

Doesn't work in IE8 or below, but then again, what does? Here is a fiddle: http://jsfiddle.net/a8LT7/

Answer 4

You could use jquery or javascript DOM:

$(".button2").css({"height":$(".button2").height() - 8px}); 

or

var height = document.getElementsByClassName("button1")[0].setoffHeight;
$(".button2").css({"height":height});