[whatwg] Alignment of empty buttons

Christian Biesinger cbiesinger at google.com
Fri May 3 16:07:21 PDT 2013

fantasai pointed out that CSS does specify this:
"If the box does not have a baseline, align the bottom margin edge
with the parent's baseline."

Sounds like there's a bug in Firefox and (still) in Chrome dev.


On Thu, Apr 25, 2013 at 10:43 AM, Christian Biesinger
<cbiesinger at google.com> wrote:
> Hi,
> I had to recently investigate issues with the alignment of empty
> buttons, i.e. <button></button>, and I noticed some browser
> differences.
> Specifically, take this testcase:
> http://plexode.com/eval3/#s=aekVQXANJVQMbAx14Hz1PdQFcAYMbARIYUVkcAYYOfp8Zo6WFn6KkXphDVlVVUE+bnZ8aEawBsk8dEJaYmB11HwEdtLa4H8PNt08fA14A
> Where should the button be positioned relative to the input field (or
> if you prefer, the baseline of the block)? Chrome dev, IE and Opera
> put the bottom of the button a bit higher than the bottom of the
> input, whereas Firefox seems to approximately center the button on the
> line (though without using vertical-align:middle).
> Chrome stable puts the top of the button slightly below the top of the input.
> Any suggestions for what the right behavior here is...? Note that this
> isn't an entirely academic question, because websites do use empty
> buttons (styling them with a width, height and background image).
> -christian

More information about the whatwg mailing list