Problems with 2 span elements inside element

Question

I'm trying to use a text as a link, but I fails with 2 things: 1. There is a blank space between the 2 span elements but I failed to remove it (margin-right and margin-left did nothing):

As I hover on the rapitec span element, I get a pointer cursor, whereas I get default cursor as I hover the .com span element.

HTML:

<a href="index.html">
  <span style="margin-right: 0; border: solid;" id="logoText">rapitec</span>
  <span style="margin-left: 0; border: solid;" id="logoPrefix">.com</span>
</a>

1) https://css-tricks.com/fighting-the-space-between-inline-block-elements/ — 04FS, Mar 22 '19 at 14:10
2) Your example here does not reproduce what you are saying is happening, so provide a proper [mcve], please. — 04FS, Mar 22 '19 at 14:11

Peter B · Answer 1 · 2019-03-22T14:15:42.867

A <span> is an inline element, and any whitespace including linebreaks between inline elements is shown as a single space.

You can remove the linebreak to make it work as desired:

<a href="index.html">
  <span style="margin-right: 0; border: solid;" id="logoText">rapitec</span><span style="margin-left: 0; border: solid;" id="logoPrefix">.com</span>
</a>

Another option can be to use CSS float:left for the span-elements, but that may cause other unwanted effects for your layout if you don't do it carefully.

And about your 2) mouse pointer issue: I can't reproduce it here, and I don't see anything in what you posted that could cause it.

I think you just beat me to it! `;-)` – Martin Mar 22 '19 at 14:15 — Martin, Mar 22 '19 at 14:15

connexo · Answer 2 · 2019-03-22T14:16:21.900

Ways to fix the white-space-issue:

Make sure there is no whitespace:

<a href="index.html"><span style="border: solid;" id="logoText">rapitec</span><span style="border: solid;" id="logoPrefix">.com</span></a>

Use display: flex;:

.flexcontainer { display: flex; }

<a href="index.html" class="flexcontainer">
  <span style="border: solid;" id="logoText">rapitec</span>
  <span style="border: solid;" id="logoPrefix">.com</span>
</a>

Set the parent element's font-size: 0; and re-set on the children:

.inlineblock-container { font-size: 0; }

.inlineblock-container * { font-size: 16px; }

<a href="index.html" class="inlineblock-container">
  <span style="border: solid;" id="logoText">rapitec</span>
  <span style="border: solid;" id="logoPrefix">.com</span>
</a>

The other issue seems not reproducible in your snippet.

Nice to see the choice of solutions. – Martin Mar 22 '19 at 14:15 — Martin, Mar 22 '19 at 14:15

Problems with 2 span elements inside element

2 Answers2