In this article, you will learn how to give space between two buttons with the help of CSS. But, first, learn about the margin-left and margin-right properties one by one. So, let’s start!
What is “margin-left” CSS Property?
In CSS, “margin-left” property is utilized to create space from the left side of the elements. The element will be further away from its neighbors if the value is positive, whereas it becomes closer to its neighbors if the specified value is negative.
Syntax
The syntax of the margin-left property is as follows:
In the place of “value”, set the margin you want to give to the element from the left side.
What is “margin-right” CSS Property?
The “margin-right” property of CSS is utilized to create space from the right side of the element. It positions the margin area on the element’s right side. The default value of the margin-right property is set as zero; however, you can specify both positive and negative values for it.
Syntax
The syntax of the margin-right property is given below:
Place the “value” which you want to set as the margin from the right side of the element.
How to Give Space Between Two Buttons?
You can create space between two buttons using the “margin-left” and “margin-right” properties. To do so, in the HTML section, we will add a heading using <h1> and create two buttons with the class name “btn1” and “btn2”, respectively.
HTML
The default outcome of the given code is:
Now, move to the CSS to create space between these two buttons.
Example 1: Giving Space Between Two Buttons Using margin-right Property
Here, use “.btn1” to access the first button added in the HTML and set the value of the margin-right property as “100px”.
CSS
margin-right: 100px;
}
As you can see, space is created on the right side of the first button:
In the next example, we will use the “margin-left” property to create space between two buttons.
Example 2: Giving Space Between Two Buttons Using margin-left Property
We will use “.btn2” to access the second button created in the HTML file and assign the value of the margin-left property as “50px”:
margin-left: 50px;
}
Upon doing so, space is created left side of the second button which can be seen below:
Want to use both properties at once? Check out the next example!
Example 3: Giving Space Between Two Buttons Using margin-left and margin-right Properties
You can also set the margin of both buttons to give space between them. To do so, we will create space from right side of the first button and from the left side of the second button using margin-right and margin-left properties, respectively:
margin-right: 70px;
}
.btn2{
margin-left: 70px;
}
Output
We have provided the simplest method related to giving space between two buttons in CSS.
Conclusion
“margin-left” and “margin-right” properties of CSS are used to give space between two buttons. Using this, you can adjust the space from the right and left sides of the buttons. In this article, we have explained how to give space between two buttons using two different methods and provided examples for each of them.
