Closed Bug 153953 Opened 22 years ago Closed 22 years ago
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 .
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.
*** This bug has been marked as a duplicate of 22274 ***
Status: UNCONFIRMED → RESOLVED
Closed: 22 years ago
Resolution: --- → DUPLICATE
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.
Status: RESOLVED → VERIFIED
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.
Summary: Anchor tags (links) insist on having whitespace (padding or margin or something) below them, changing layout of images (in a table), despite CSS to the contrary → 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.
You need to log in before you can comment on or make changes to this bug.