vertical-align renders results unexpectedly

UNCONFIRMED
Unassigned

Status

()

UNCONFIRMED
4 years ago
4 years ago

People

(Reporter: aaron, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

4 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.65 Safari/537.36

Steps to reproduce:

Created a test case here: http://codepen.io/anon/pen/YXpaRX


Actual results:

vertical-align: middle; elements render parent to be bigger than expected


Expected results:

the demo should of rendered 60px in height, not 61px
Is the "just for debugging" stuff supposed to be in there?

I didn't look at the testcase closely, but in general, inline elements have extents, determined by extending the font metrics outwards so that they're the size of the 'line-height' (which is really 'inline-height') that increase the height of the line.  That might be what you're seeing.
(Reporter)

Comment 2

4 years ago
@David, thanks for the guess. but I've set the line height to all elements to be 20px. so it should, indeed be 60px on the `.layout` element

the just for debugging stuff was to illustrate the rendered example without drawing on the box.
You need to log in before you can comment on or make changes to this bug.