2

I know that when using inline-block elements you get unwanted white space.

But why in this example have these two inline link elements got a slight space between them?

You can see they are on two lines and if I put them side by side and remove the space in my text editor the space is then gone, but surely it should ignore the space in my text editor?

<body>
    <a href="#">link 1</a>
    <a href="#">Link 2</a>
</body>

This has space between the links.

<body>
    <a href="#">link 1</a><a href="#">Link 2</a>
</body>

This doesn't.

Thanks.

https://jsfiddle.net/hfgjwj55/

Joe Consterdine
  • 1,035
  • 1
  • 18
  • 37

6 Answers6

3

When you give a new line between two elements, one space will be added between them as below.

<body>
    <a href="#">link 1</a>
    <a href="#">Link 2</a>
</body>

The above and the below are same,

<body>
    <a href="#">link 1</a> <a href="#">Link 2</a>
</body>

If you haven't given any white space or new line then there won't be any space between elements.

<body>
    <a href="#">link 1</a><a href="#">Link 2</a>
</body>

Even if you provide two space between the elements as below, it will be rendered with only one space.

<body>
    <a href="#">link 1</a>  <a href="#">Link 2</a>
</body>

So,if you need more than one space you have to use &nbsp; as below.

<body>
    <a href="#">link 1</a>&nbsp;&nbsp;<a href="#">Link 2</a>
</body>
3

There's different options to avoid white-space of being displayed, in your example you could:

  • display the a-tags as inline-block and float them left https://jsfiddle.net/hfgjwj55/3/

    a {
    display: inline-block;
    float: left; 
}

  • set font-size on the wrapper (in this case the body) 0 and the font-size of the a-tags to e.g. 16px https://jsfiddle.net/hfgjwj55/2/

    body {
    font-size: 0;
}

a {
    font-size: 16px;
}

  • put html comments between the elements

Sarah G.
  • 66
  • 4
2

This has been a problem for me a lot of times aswell.

I usually always solve it like this: https://jsfiddle.net/g7h0fbyn/

   <a href="#">link 1</a><!--
--><a href="#">Link 2</a>

There already is a Question to this on stackoverflow, with a really nice answer, you should check it out: How to remove the space between inline-block elements?

Community
  • 1
  • 1
jogoe
  • 482
  • 6
  • 18
0

This is because if you place any number of blank spaces in HTML code it will be converted to one blank space.

1.

    <body>
        <a href="#">link 1</a>
        <a href="#">Link 2</a>
    </body

New line will be adding one space between two elements. so either its one space or multiple it would be considered one white space between two elements.

2.

<body>
   <a href="#">link 1</a>   <a href="#">Link 2</a>
</body>`

both above case will have one space between it. while below code will not have any space in between

<body>
    <a href="#">link 1</a><a href="#">Link 2</a>
</body

if you want multiple spaces use &nbsp; as follow:

<body>
    <a href="#">link 1</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Link 2</a>
</body
Hemant Metalia
  • 29,730
  • 18
  • 72
  • 91
0

The browser doesn't see the difference in which whitespace is wanted and which isn't; all whitespace is collapsed into a single space character (unless otherwise specified by pre and the like).

Other than removing the whitespace in your source code, one possible (though kind of tricky) solution is to globaly set font-size to 0 globally and resetting it for particular elements.

Another way is to comment out the whitespace like this:

<a href="#">link 1</a>
<a href="#">Link 2</a>

Though that may be a bit messy.

There are ways to avoid this problem altogether, like using Flexbox, but that's probably overkill for your example.

Andii
  • 337
  • 1
  • 5
  • 19
-1

You can add margin left to remove white space.

a{
margin-left:-4px;
}
Khetesh kumawat
  • 681
  • 7
  • 15