When I created this blog, I wanted to add some small changes to the default Jekyll theme called Minima. One of these changes was that I added an additional social media link for my ResearchGate account. I created a small image for the logo and added it to the template with the same markup as the other icons.

This is the original template for the integration of the Github account:

<a href="https://github.com/{{ include.username }}"><span class="icon icon--github">{% include icon-github.svg %}</span><span class="username">{{ include.username }}</span></a>

And this is my template for integrating a ResearchGate account:

<a href="https://www.researchgate.net/profile/{{ include.username }}"><img class="icon icon--rg" src="{{ "assets/rg.png" | relative_url }}" alt="Research gate"/><span class="username">{{ include.displayname }}</span></a>

The only difference is the use of an <ìmg> tag instead of the <span> that surrounds the SVG file. We have the CSS-class icon for padding and positioning relative to the account name and the image is 16x16 pixels, just as the SVG for the Github icon. So this should work out fine, right?

However, the result actually looked like this:

There is more space after the Github icon than after the ResearchGate icon.

It’s not the CSS

Where does this additional space come from? It has to be some margin or padding of one of the elements, right? Wrong again. The <svg> element is 16x16 pixel wide as it should be and the only margin or padding involved are 10 pixels of padding to the right of the <span> element surrounding the Github icon and the <img> element for the ResearchGate icon. The problem is that somehow the actual content width of the <span> element is about 4 pixels larger than it should be (depending on the Browser).

Newlines don’t matter in HTML - except when they do

The reason for the spurious space is an innocent newline character at the end of the SVG file for the Github icon. We conditioned ourselves to ignore newline characters when it comes to HTML, but they can matter in a horizontal context.

This

<span>no</span><span>space</span>

renders differently than this

<span>no
</span><span>space</span>

as you can see:

nospace
no space

So the take home message is: If your margin or padding is off and you cannot spot the error in the CSS, it might actually be some whitespace character that you did not notice.