Explain why white space disappears in this inline element?

Question

notice that there is white space after "l" in first instance while its not there in the second instance.

It will be great if someone can point to some specification explaining this behaviour? I couldnt find any explaination?

http://stackoverflow.com/questions/35721430/space-between-inline-block-and-inline-element — vkjgr, Nov 24 '16 at 08:44
Possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Luuuud, Nov 24 '16 at 08:59
@VeikoJääger . that definitely gives me a direction .. thanks a lot — ashish singh, Nov 24 '16 at 09:25

score 0 · Answer 1 · answered Nov 24 '16 at 09:11

Each 'a' element is independent by itself. For each element you declared underline but you have also defined a margin between them so there is a space.

To reach your goal you should wrap them with a container and declare underline over there.

Here is an option for that:

<body> 
  <div class="underline-me">
    <a id="one">
      expol
    </a>
    <a id="two">
      expol
    </a>
  </div>
</body>

and for the css:

a{
  /* text-decoration: underline; */
  font-size: 4em;
  /* margin: 2px; */
}
.underline-me{
  text-decoration: underline;
}

Explain why white space disappears in this inline element?

1 Answers1