Browsers inserting line breaks where HTML code has none

Question

Screenshot of webpage, Chrome devtools inspection info, and source code

I have a Wordpress site where, for no reason I can find, the text caption under the graphics is being displayed in the browser as two or more lines, even though there's no line break specified in the source code.

As you can see in the screenshot, when I inspect it with Chrome, the console shows a line break in the code before and after the A tag, as well as two quotation marks around the first "line" that don't appear in the browser's render. However, when viewing the source code in Notepad, neither the line breaks nor the quotation marks are there.

The rendered page, with the erroneous line break, appears the same in Chrome, Firefox, and Edge (the last of which has no add-ons installed). This is all on Windows 10. Firefox's inspection panel shows the line breaks in the code, but not the quotation marks.

The page in the screenshot is behind a paywall, but you can see an identical situation at ~~this link~~ [now-obsolete link redacted]. In fact, it appears to be happening on other pages of the site too, for example ~~this one~~ [now-obsolete link redacted], where you can see an even more extreme example of a line break being inserted before and after every link. This started recently - all of these captions appeared normal, as if only a single line, a couple weeks ago at most.

I am totally stumped. What on earth is going on here? Is this somehow the doing of a WordPress theme/plugin? I could try disabling them all, but even if that fixes it, I'm still dying to know what it means for something to show up as multiple lines in the devtools inspector (and in the rendered output) but not in the actual source code.

Its because the anchor tag is being displayed as block. https://i.imgur.com/ygLNJvU.png — Muhammad Zohaib, Jun 12 '22 at 17:09
Hi Evan, You should summarize your problem to get help. You may want to visit https://stackoverflow.com/help/asking — AbdurrahmanY, Jun 12 '22 at 17:56
Please provide enough code so others can better understand or reproduce the problem. — Community, Jun 12 '22 at 17:57
@MuhammadZohaib Ah, thanks!!! That was exactly it, and was my own fault. I've fixed it now. — Evan, Jun 12 '22 at 18:04

Evan · Answer 1 · 2022-06-12T18:18:52.327

The problem was that the A tag had the display: block property applied to it. Thanks to @MuhammadZohaib for the quick reply!

This was entirely my own doing - I had added a rule in the stylesheet making A tags in the caption container tables display as blocks as a way to fix some weird display results on the linked graphics themselves, and didn't realize I had allowed it to apply to the A tags in the actual caption text as well (in fact, I had almost completely forgotten about it).

Apparently the A tag still displays on a separate line in the devtools inspector's code display, but that's fine with me as long as the end users don't see it. Still no idea why Chrome's inspector is showing quotation marks around the first sentence (they're still there even after a hard refresh), but that's also apparently not a problem.

Browsers inserting line breaks where HTML code has none

1 Answers1