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?