vertical-align renders results unexpectedly

RESOLVED INACTIVE

Status

()

Core
Layout: Block and Inline
RESOLVED INACTIVE
3 years ago
4 days ago

People

(Reporter: aaron, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

3 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

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

Comment 3

4 days ago
Per policy at https://wiki.mozilla.org/Bug_Triage/Projects/Bug_Handling/Bug_Husbandry#Inactive_Bugs. If this bug is not an enhancement request or a bug not present in a supported release of Firefox, then it may be reopened.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 4 days ago
Resolution: --- → INACTIVE
You need to log in before you can comment on or make changes to this bug.