[whatwg] Alignment of empty buttons

[Christian Biesinger]

On Thu, Apr 25, 2013 at 10:48 AM, Boris Zbarsky <bzbarsky at mit.edu> wrote:
> Gecko puts the baseline of the button at the baseline of the button's text,
> and if the button is not auto-height the extra height is added (or removed)
> equally from above and below the text.
>
> It looks like Chrome dev does the same unless there's no text in the button,
> in which case they put the baseline at the bottom margin edge (more
> inline-block-like behavior?).

I looked at this some more. It seems that for an empty button in
Chrome dev, the baseline gets put just before the bottom padding (by
virtue of implementing buttons via flexbox, which defines that as the
synthesized baseline).

Chrome stable is a little trickier since it depends on the height of
the button, but for "small" buttons I think it uses bottom of margin
box, whereas for "big" buttons the baseline is calculated like for an
inline-block div that has text in it.

IE (and Presto) seems to put it at the bottom of the margin box:
http://jsbin.com/ehosup/2

Obviously, the difference between Chrome dev and IE is subtle with the
default style.

-christian