Add Space Between Buttons in HTML

  1. Add an Empty div Element Between Two Buttons to Add Space Between Them in HTML
  2. Use the margin-right Property to Put Space Between the Buttons in HTML
  3. Use the margin-right Property and not(:last-child) Selector to Provide Space Between Multiple Buttons in HTML

This article will introduce a few methods to add space between two HTML buttons.

Add an Empty div Element Between Two Buttons to Add Space Between Them in HTML

An empty div can be added between the two buttons to add a space between them. Then, we can provide the div with some width which creates some space between buttons.

By default, a div has a display property of block. It means the div takes an entire row of its position.

If we add an element after a div, that element will be placed below the div in the browser.

Therefore we have to change the display property of the div to inline-block. The inline-block elements have the property of both block and inline.

The inline-block elements can have width, margin, padding, etc., but they do not take the entire row of their location, unlike the block elements.

For example, create a div; inside that div, create two buttons using the button tag. Name those buttons Button 1 and Button 2.

Create a div between those buttons and give it a class of space. This div should not contain any elements.

Select the inner div with its class space in CSS, and set the display property to inner-block. Give the div some width according to the requirement.

Note that the value of width will be the space between the buttons. Also, set the height property to auto so that the div will take only the required height.

The example below shows that two buttons have a space of 4px.

Example Code:

<div>
  <button>
    Button 1
  </button>
  <div class="space">
  </div>
  <button>
    Button 2
  </button>
</div>
.space {
  width: 4px;
  height: auto;
  display: inline-block;
}

Use the margin-right Property to Put Space Between the Buttons in HTML

The CSS margin property creates space around elements outside of any defined borders. The margin property combines four properties: margin-top, margin-bottom, margin-left and margin-right.

The margin-top property creates space on the top of an element. Likewise, the margin-bottom, margin-right and margin-left properties create space on the element’s bottom, right and left.

We can use the margin-right property for the first button element to create a space between buttons.

As a result, a margin of a certain width to the button’s right will be created. Then, the other button will reside next to the margin.

For example, create two buttons using the button tag and name Button 1 and Button 2. Set the classes of the button as B1 and B2.

In CSS, select the B1 class and set its margin-right property to 4px. This will create a 4px space to Button 1 right, creating a space between the two buttons.

Example Code:

<button class="B1">
  Button1
</button>
<button class="B2">
  Button2
</button>
.B1 {
 margin-right: 4px;
}

Use the margin-right Property and not(:last-child) Selector to Provide Space Between Multiple Buttons in HTML

We can add spaces between the multiple buttons using the margin-right property and the CSS not() selector. The logic behind this approach is we will create the space between each button using the margin-right property as in the second method.

But, we will not create a space after the last button.

For that, we will use the not() selector. Inside, the not selector, we can use :last-child.

The :last-child selector denotes the last child inside a container. As a whole, we can apply the following rule to apply the styles.

.container>.button:not(:last-child){

}

The > symbol selects every child inside the container. As a result, the styles will be applied to all the children with the class button inside the parent container except the last child.

For example, create a div and give it a class of container.

Inside the div, create three buttons and name them Button 1, Button 2, and Button 3. Also, set the button as the class for each button.

Now, use the rule mentioned above to set the style in CSS. Inside the rule, use the margin-right property and set it to 10px to add space to 10px between the child elements or buttons.

The example below shows that the three buttons have a space of 10px between them.

Example Code:

<div class='container'>
 <button class='button'>Button 1</button>
 <button class='button'>Button 2</button>
 <button class='button'>Button 3</button>
</div>
.container>.button:not(:last-child) {
 margin-right: 10px;
}
Write for us
DelftStack articles are written by software geeks like you. If you also would like to contribute to DelftStack by writing paid articles, you can check the write for us page.

Related Article - HTML Button

  • Hide HTML Buttons and Show Them Using Onclick
  • Create Link in HTML Button
  • Embed Image in a Button in HTML