WordPress huge whitespace within elements content output by php

I’m currently experiencing a strange issue in WordPress where certain elements will output the value a variable, but with huge amounts of whitespace around the text.

To illustrate say my element is output like so:

<span class="item--price">
     <?php echo $price; ?>
</span>

(var_dump() of $price results in ((string(12) “from £55.00”)))

will result in the following: Whitespace capture

I’m not sure if this is caused by some post processing hook from WordPress or whether I’m just being extremely naïve but I cant seem to figure out how to remove it.

Edit:

(Solution?)

The problem was my understanding of the scope of whitespace – I am not sure the exact logic behind this but the <H3> and <span> elements I was having problems with were both contained in a flex, and the whitspace between them was being ignored. For example a

    <div style="display:flex;">
       <h1> title </h1> <span> title variable </span>
    </div>

It is an issue since styling the white-space to normal collapses the whitespace around, and there may be places where whitespace is intended.

The issue persists due to the reason the whitespace is removed and the fix for it: This stack overflow post explains why whitespace is removed from flex children

The fix is to add white-space: pre; or pre-line, however the browser then renders all the whitespace, brining me back to my original problem; Why is the whitespace being added in the first place?

Answer

Your screenshot is of whitespace in markup, not the page — whitespace in markup shouldn’t be an issue, unless it is showing up on the page as well. It might be that WordPress is trying to format your content as a paragraph.

If that element is displaying the whitespace on the page, you can adjust with the white-space CSS property, e.g. white-space: normal on span.item--price in your example.