empty inline-block element inside a block element makes the block element taller than it should

RESOLVED INVALID

Status

()

Core
Layout
RESOLVED INVALID
9 years ago
9 years ago

People

(Reporter: Waldir, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(2 attachments)

(Reporter)

Description

9 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; pt-PT; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; pt-PT; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5

I managed to track down the cause of this after a lot of testing. It appears that if you have a block element (say a div) with an inline-block element inside (either a natively inline or natively block one), the outer element renders an extra space in the bottom. See the url for an example of the bug.
If the inner element is filled with anything (say a nbsp.) the bug disappears.
This is demonstrated in http://www.waldirpimenta.com/temp/wtf/demo2.html

Reproducible: Always

Steps to Reproduce:
1. create a block element
2. create an inline/block element inside it
3. give the inner element a height greater than the default lineheight
Actual Results:  
see url

Expected Results:  
see url 2 (demo2.html)
(Reporter)

Comment 1

9 years ago
argh! I pressed the wrong key when writing the title. I meant inline-block, not inline/block...
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout

Comment 2

9 years ago
That is the correct behaviour. Opera (9.6 & 10a), WebKit & Safari display the same as Gecko.
When the inline-block contains something (text), it's baseline is that 'something' and it is aligned with the baseline of the parent block. When it is completely empty, then the bottom of the inline-block rests on the baseline of the parent block, the same way as an inline-image would rest on that baseline. The space at the bottom of the parent block you see in your demo1.html is the space for descenders (characters like p, q, j, etc).
Status: UNCONFIRMED → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → INVALID
Summary: empty inline/block element inside a block element makes the block element taller than it should → empty inline-block element inside a block element makes the block element taller than it should

Comment 3

9 years ago
Created attachment 358767 [details]
demo 1 from reporter

(for safekeeping)

Comment 4

9 years ago
Created attachment 358768 [details]
demo 2 from reporter
(Reporter)

Comment 5

9 years ago
Thanks a lot for the explanation, and sorry for the invalid bug report :)
You need to log in before you can comment on or make changes to this bug.