153953 - Anchor tags (links) insist on having whitespace (padding or margin or something) below them, changing layout of images (in a table), despite CSS line-height to the contrary. Affects other inline tags too.

Status: VERIFIED DUPLICATE of bug 22274

(Core :: Layout, defect)

Description

[Jonadab the Unsightly One (Nathan Eady)]

Using transitional XHTML.  Have not tested other browser support.  The URL
shows two sections of HTML that are identical save for the inclusion of
<a class="bar" href="http://something">...</a> around several of the images.
I attempted via CSS to turn off all whitespace surrounding the items, which
works without the anchor tags, but fails miserably with them.  (Yes, the
same CSS is applied to the anchor tags directly (and to the images within)
as works for the images without them.)  I also threw in text-decoration: none
for good measure, although I wasn't seeing any underlining.

If this is not a bug, I'd sure like to know what CSS I neglected that 
would remove this whitespace; the CSS2 area at w3schools doesn't
seem to have anything further that would be relevant.  I'm suspecting
lack of support for one or more CSS items on anchor tags, but I'm not
sure which.

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

*** This bug has been marked as a duplicate of 22274 ***

Comment 2

[Boris Zbarsky [:bzbarsky]]

You want to set the line-height to 0 or set the anchors and images to be blocks,
not inlines; bug 22274 has the details.

Comment 3

[Jonadab the Unsightly One (Nathan Eady)]

Line height _was_ zero for all the relevant portions.  (Changing the 
inlines to blocks is _not_ the correct solution; these should be 
inline, in the sense that there should _not_ be line breaks before
and after them, but the line-height is the problem:  it is being
ignored.)

From comments in bug 22274 (especially starting around comment 
number 57) it seems that besides line-height, the font-size of
the containing block may also be relevant.  So I produced a 
revised testcase with the font-size on the containing block-level
elements set to 0.  This helps.  The offending excess whitespace
is now reduced to one pixel.  Further, the one pixel, as per bug 
22274 comment 74, can be alieviated by not just setting font-size 
of the containing block to 0 but also setting the vertical-align 
of the contained inline elements to top.  (Why top?  I'm not
sure.  I'll have to investigate that one further.  Anyway, it
works.)

Here's the modified testcase, that works:
http://adminsystem.galion.lib.oh.us/mozilla/testcase-anchor-layout-2.htm

It seems very odd to me that a line-height of 0 (yes, the line-height
of the containing block is 0, if you look at the CSS of the testcase)
is ineffectual unless the font-size is also reduced, but I'll have to 
look through the CSS2 spec itself (rather than just w3schools, which 
I have been using) before I can comment further on that.  

Improving summary for benefit of future searchers; I didn't find bug
22274, and it's obvious from the number of dupes that some other
people aren't finding it right away too.  Also, it's LONG, and
the useful information is fifty-plus comments down.