display: table-cell, border-spacing don't work with buttons?

Question

So, I'm using display: table-cell to put two buttons next to each other so that if text from one overflows to the next line, both buttons are the same height. I have border-collapse: separate and am using border-spacing to put space between them. It works just fine if I'm using something like <div class="button">, but as soon as I use the <button> element, the middle space disappears.
JSFiddle: http://jsfiddle.net/uASbb/

Now, using the <div> is fine for now (if not semantically as accurate), so I'm mostly just curious if anyone knows what exactly is going on here.
Note: I've also noticed some (different) weird behavior with using <input> elements in this same situation: http://jsfiddle.net/G5SFX/1/

Is display: table-cell just not supported in these instances? Is this a bug?

Thanks!

EDIT: It seems like you just can't apply a display: table-cell to a button; it just defaults back to inline-block. See this screenshot from Chrome WebInspector:


Now the questions remain: Is this intentional? Is it the specification or is it just the browser? Can we get it changed?

Answer 1

Inserting the button element into a div is a good solution (in your place I would have choose it, too), but if you want to display both button elements side by side with space in between without the help from a div you can try this for your .item class:

.item {
    display: table-cell;
    width: 46%;
    background: aliceBlue;
    border: 1px solid black;
    margin: 1%;
}

Width is reduced to 46% to allow a margin of 1% around every button element. You have a space between them now, and also if you resize the window the second button element won't fall under the first one.

Example: http://jsfiddle.net/codenighter/H7TZU/

Hope it helps.

EDIT: It seems that border-spacing (in fact none of block styling is working) doesn't work with button or input. But it does working with other inline elements like span, h1 or b. So, for input and button the display: table-cell property can't be properly applied (I've changed the width value for button and input and it showed, while for span and b the width remained actually at 50%).

Examples: http://jsfiddle.net/codenighter/HrTZS/