Removing whitespace from around links?

HTML & CSS
1

Hi there,

Sometimes when I have links on new lines, it is adding a space/whitespace after the link.

For example, if I have:

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

It will look like:
Link 1 Link 2 Link3

But if I have them like this:

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

It will display:
Link1Link2Link3

Which I can then style more accurately.

I’m wondering if there is a way to remove that whitespace when having the links on a new line?

2

Hi there toolman,

does this help…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
ul {
    padding: 0;
    margin: 0;
    list-style: none;
 }
ul::after {
    display: block;
    content: '';
    clear: both;
 }
ul li {
    float: left;
 }
ul a {
    display: block;
    padding: 0.25em 1em;
    background-color: #eef;
    text-decoration: none;
 }
</style>

</head>
<body> 

 <ul>
  <li><a href="https://sitepoint.com">Link 1</a></li>
  <li><a href="https://example.com">Link 2</a></li>
  <li><a href="https://bbc.co.uk">Link 3</a></li>
 </ul>

 <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 </p>

</body>
</html>

coothead

1 Like
3

Thanks :slight_smile:

I’m wondering if there is a trick of removing the space if it’s just link tags rather than lists?

4

Hi there toolman,

I consider that three links constitute a list of links ,
hence my coding style. :winky:

If you don’t consider that three links constitute a
list, then you can code it like this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

div::after {
    display: block;
    content: '';
    clear: both;
 }

div a {
    float: left;
    padding: 0.25em 1em;
    background-color: #eef;
    text-decoration: none;
 }
</style>

</head>
<body> 

 <div>
  <a href="https://sitepoint.com">Link 1</a>
  <a href="https://example.com">Link 2</a>
  <a href="https://bbc.co.uk">Link 3</a>
 </div>

 <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 </p>

</body>
</html>

coothead

5

There are ‘tricks’ to remove the space but it is more pertinent to understand what is happening and then you can solve the problem yourself using the correct properties (as @coothead has shown above). :slight_smile:

Tags that are inline elements (like anchors and spans) are used to mark up inline phrases and content and behave much like the words in a sentence where you leave a space between each word otherwise the words are just one long line of text. It’s perhaps easier to understand with a contrived example.

<p>This is a <i>paragraph</i> that has <span>some</span> <strong>content</strong><span>styled</span> with inline tags.</p>

If the browsers didn’t honour the space after the inline tag then your paragraph would read like this.

“This is a paragraphthat has somecontentstyled with inline tags.”

That’s why browsers respect the space after an inline tags otherwise all words would run together.

If you don’t want that behaviour (as in a list of links) then you need to change the display of the inline element to a block display (as are floats, flex items, grid items table-cells).

Traditionally a list of links is usually wrapped in the ul list structure as shown above as that seems to make semantic sense but you could also wrap the bare anchors in a nav element if you wanted as html5 allows this for the main navigation.

e.g.

<nav>
	<a href="#">Link</a>
	<a href="#">Link</a>
	<a href="#">Link</a>
</nav>

You could apply display flex to nav and then there would be no space between each link.

I still tend to use the UL list structure but mainly from habit and because of the extra semantics I believe it imparts to the document.

5 Likes
6

I see, thank you I understand now.

I have used a <ul> now

Thanks for the replies.

1 Like
7

Adding to 'PaulOB’s post here is a simple display demo of just the anchors with different layouts.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Demo </title>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
</head>
<body>

<h3> Lined </h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>

<h3> Non-Spaced / One-line </h3>
<a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a>

<h3> Spaced / One-line </h3>
<a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a>

</body>
</html>

The separate line anchors act exactly the same as the spaced anchors.

3 Likes
8

As to the why: Inline elements (such as links) are rendered by the browser as they are written - but multiple whitespace characters are condensed into a single space character. This allows for styling of source code without affecting output. Line breaks are considered whitespace characters, and are rendered accordingly

(There is a notable exception to this: a line break immediately following a tag opening, or immediately preceding a tag closing, is ignored under ISO8879.)

4 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.