askvity

How Do I Make a Horizontal Space Between Two Buttons in HTML?

Published in HTML CSS Spacing Buttons 4 mins read

The most standard and recommended way to create horizontal space between two buttons in HTML is by using CSS margin or padding properties, as mentioned in the reference. While the reference also mentions adding empty elements like <br> or <hr>, these are typically used for vertical spacing or adding a rule, and not the best practice for precise horizontal spacing between inline elements like buttons.

Adding space between elements is a common requirement for layout and aesthetics on a webpage. CSS provides powerful and flexible ways to control the spacing around elements, ensuring your design is clean and maintainable.

Using CSS margin (Recommended Approach)

The margin property in CSS creates space outside an element, separating it from its neighbors. This is ideal for adding horizontal space between two buttons that sit side-by-side.

You can apply margin in a few ways:

  • margin-right: Add space to the right of the first button.
  • margin-left: Add space to the left of the second button.
  • Both: Apply margin-right to the first and margin-left to the second (though often just one is sufficient).

Here are practical examples:

1. Using Inline Styles (Quick but Less Maintainable)

<button style="margin-right: 10px;">Button 1</button>
<button>Button 2</button>
  • Explanation: The margin-right: 10px; style is applied directly to the first button, pushing the second button 10 pixels to its right.

2. Using Internal CSS with a Class (More Reusable)

This method is better as it separates styling from HTML and allows you to reuse the spacing style.

<!DOCTYPE html>
<html>
<head>
<title>Button Spacing</title>
<style>
  .space-right {
    margin-right: 15px; /* Adjust the value as needed */
  }

  /* Optional: Basic button styling for clarity */
  button {
    padding: 8px 15px;
    cursor: pointer;
  }
</style>
</head>
<body>

  <button class="space-right">Button A</button>
  <button>Button B</button>

</body>
</html>
  • Explanation:
    • We define a CSS class .space-right in the <style> block within the <head>.
    • This class has margin-right: 15px;.
    • We apply this class (class="space-right") to the first button.
    • Now, any button (or other element) you give the class space-right will have 15px of margin on its right side, automatically creating horizontal space when followed by another element on the same line.

3. Using External CSS (Best Practice)

For larger projects, define your styles in a separate .css file and link it to your HTML.

<!-- In your HTML file (.html) -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <button class="space-right">First Action</button>
  <button>Second Action</button>
</body>
/* In your CSS file (styles.css) */
.space-right {
  margin-right: 20px; /* Adjust spacing */
}

button {
  /* Button styles */
  padding: 10px 20px;
  cursor: pointer;
}
  • Explanation: Similar to internal CSS, but the styles are in styles.css, making your HTML cleaner and centralizing your styling.

What about Padding or HTML Elements?

  • Using CSS padding: While the reference mentions padding, padding adds space inside an element, between its content and its border. Applying padding to a button adds space within the button itself, not space between two separate buttons. Padding can be used on a container element that wraps the buttons to add space around the group, but margin is the correct property for adding space between sibling elements like two buttons.
  • Using HTML Empty Elements: The reference also mentions using empty elements like <br> or <hr> for spacing.
    • <br> creates a line break, forcing the next element onto a new line (vertical space). This doesn't create horizontal space between buttons on the same line.
    • <hr> creates a horizontal rule (a line) and typically also causes line breaks. This is not suitable for simply adding empty horizontal space between buttons.
    • Adding non-semantic elements (like an empty <span> or <i>) solely to apply margin or padding for spacing is generally considered poor practice for accessibility and maintainability compared to applying the spacing directly to the elements needing separation using CSS.

In summary, for creating horizontal space between buttons, CSS margin is the most appropriate, flexible, and standard method. Apply margin-right to the left button or margin-left to the right button.

Related Articles