[whatwg] Alignment of empty buttons

Christian Biesinger cbiesinger at google.com
Thu Apr 25 10:58:58 PDT 2013

On Thu, Apr 25, 2013 at 10:48 AM, Boris Zbarsky <bzbarsky at mit.edu> wrote:
> On 4/25/13 1:43 PM, Christian Biesinger wrote:
>> Where should the button be positioned relative to the input field (or
>> if you prefer, the baseline of the block)?
> The question you are really asking is "where is the baseline of the
> button?", right?

True - when I started writing the email, I thought that Firefox was
actually centering the button, which I only later realized wasn't
quite correct.

>> 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).
> 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.

Hm, but I don't think that's completely correct, because then the
positioning should stay the same when I start entering text in the
button, right? Or does adding text make the text run have height,
affecting where the extra height gets added?

I think what you are saying is: in Gecko, baseline of a button is
(content_box_height - text_height) / 2 + text_ascent

(BTW, where is that code located? I tried and failed to find it :( )

> 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?).

That sounds probably correct. I don't understand inline layout very
well, though I'm trying to learn...


More information about the whatwg mailing list