Links(<a>) are inline elements in HTML. Therefore, when we put multiple links inside a container, they are displayed on the same line without any space between them which can eventually result in a bad user experience.
To avoid this we always put a horizontal space between them so that the visitor can easily distinguish between the two links.
The easiest way to give space between two links in CSS is to make use of the margin-right or the margin-left properties. The margin-right property specifies a margin(space) on the right side of an element. Which can be specified in px, %, em, rem, etc.
See the following example where we have put a 30px space between the two links using the margin-right property:
Example:
a{
margin-right: 30px;
/* specifies a gap of 30px on the right side */
}
Just like the margin-right, you can also use the margin-left property to give space between the two links. The only difference is that it put a space on the left side of the element instead of the right.
See the following example:
Example:
a{
margin-left: 30px;
/* specifies a gap of 30px on the left side */
}
Note: When applying margin-left on an element, please keep in mind that it puts an unnecessary space before the very first element. In our case, it put a 30px space before the first link. To avoid this problem we mostly use margin-right instead of margin-left.
Give Space using HTML
If you don’t want to write any external CSS to give space between the links, you can alternatively use the HTML entity. The stands for non-breaking space and it does not break onto a new line on word wrap.
However the is used to give only a very little space between HTML elements.
Refer to the following example to see how we can give space between two links using . You can use as many between the elements as you want. We have used two:
Example:
<a href="#">This is a link</a> <a href="#">This is another link</a>
