Open Bug 1168622 Opened 9 years ago Updated 2 years ago

vertical-align renders results unexpectedly

Categories

(Core :: Layout: Block and Inline, defect)

Product:
Core
Component:
Layout: Block and Inline
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: aaron, Unassigned)

Details

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.
@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.
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.