How to Give Space Between Two Links in HTML & CSS?

In HTML, links are hyperlinks that can lead you to other sites. Links usually connect web resources, such as images, videos, PDF files, or web pages. HTML uses the “<a>” tag to create links by specifying the URL and linking text. When you add two links in the HTML, by default, they are placed side by side without any space.

This manual will teach you the procedure to create space between two links.

Let’s get started!

How to Give Space Between Two Links in HTML & CSS?

To give space between two links, first of all, add the required links in the HTML file.

Step 1: Add Links in HTML

In HTML, we will create a container using the <div> tag and two links with the help of the <a> tag. Here, a hyperlink reference is used to give the site’s address and to provide the required hyperlink. In addition to the address, specify the link’s name because the link does not appear on the website. It will only display the name or the caption we assign.

HTML

The following image shows that the links have been added successfully:

Step 2: Style the Div & Link

In this step, style the div and link using “div” in CSS. We will adjust the padding to “40px” and set the font size of the links as “larger”, the height of the div is set as “150px” and use the background property and set the color of the div as “black”. After that, adjust the border width as “5px”, style as “dashed” and color as “rgb(251, 255, 0)”.

CSS

Using the code above, the following output is obtained. As you can see, both the div and the links are styled:

Step 3: Give Space Between Two Links Horizontally

We can give space between two links horizontally by using HTML and CSS. Here, we will explain both methods one by one.

Method 1: Using HTML

To give space between the links without writing any external CSS, you can use “&nbsp” in the HTML where you want to create space. “&nbsp” stands for non-breaking space. In the HTML file, adding one &nbsp means one space. If you want to give more space, it is not preferable to manually add &nbsp according to the required number of spaces.

Let’s move to the example to understand the stated concept!

Example

Here, we will write four times “&nbsp” to create space after the first link in such a way that the second link will appear after the four spaces.

HTML

As you can see, space is created on the right side of the first link:

Method 2: Using CSS

In CSS, we will use the “margin-right” property to give space between two links. The “margin-right” property is utilized to add space from the right side of the element. You can also set out the negative values for it.

Syntax

The syntax of the margin-right property is given below:

In the place of “value”, set the margin from the right side of the element. Let’s continue the example.

Example

Here, we will use “a” to access the link we have created in the HTML. Next, set the value of margin-right property as “50px”:

Space is created from the right side of the first link, which can be seen below:

Step 4: Give Space Between Two Links Vertically

To give vertical space between two links, first align links in vertical form. This will be done by using the “block” value of the “display” property and then using the “line-height” property to give space between two link lines.

Example:

Here, we will set the value of the display property as “block” to align links vertically. Then, give the space between two links by setting the value of line-height property as “80px”:

As you can see, the space is created using the line-height property:

That’s it! We have explained the method of giving space between two links in HTML & CSS.

Conclusion

The “&nbsp”, “margin-right”, and “line-height” properties of CSS are used to give horizontal and vertical space between two links. Using this, you can adjust the space from the right and left sides of the links. In this article, we have explained the procedure to give space between two links using two different methods and provided related examples.