How to put spaces between vertically stacked buttons in CSS?

Question

The following code properly places each button vertically stacked.

What is the way to insert spaces between them? Currently they are stuck to each other.

<html>
<head>
<style>

.buttonClass
{
    color: blue;
    background-color: yellow;
    
    display:block;
    width: 50px;
    border: 2px solid green;
}

</style>
</head>

<body>
<button class="buttonClass">one</button>
<button class="buttonClass">two</button>
<button class="buttonClass">three</button>
<button class="buttonClass">four</button>

</body>
</html>

the duplicate cover solutions without flexbox as well and provide more details on other possible best solutions you can use instead of using margin alone :) — Always Helping, Sep 27 '20 at 07:43

score 3 · Accepted Answer · answered Sep 27 '20 at 07:32

3

Can't we use margin?

.buttonClass
{
    color: blue;
    background-color: yellow;
    display: block;
    width: 50px;
    border: 2px solid green;
    margin-bottom: 10px;
}

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>
  <body>
    <button class="buttonClass">one</button>
    <button class="buttonClass">two</button>
    <button class="buttonClass">three</button>
    <button class="buttonClass">four</button>
  </body>
</html>

answered Sep 27 '20 at 07:32

Vikram Bhatia

48
4

Thank you. I am new to all this. Had forgotten about margins. – Aquarius_Girl Sep 27 '20 at 07:36
@Aquarius_Girl No problem, and I'm new to this community. If it helped, can you accept the answer as well? – Vikram Bhatia Sep 27 '20 at 07:38
Acceptance requires a certain time period. I have done it now. – Aquarius_Girl Sep 27 '20 at 07:39

score 1 · Answer 2 · answered Sep 27 '20 at 07:45

You can use margin-bottom to put spaces between vertically stacked css buttons.

 <html>
<head>
<style>

.buttonClass
{
    color: blue;
    background-color: yellow;
    
    display:block;
    width: 50px;
    margin-bottom:10px;
    border: 2px solid green;
}

</style>
</head>

<body>
<button class="buttonClass">one</button>
<button class="buttonClass">two</button>
<button class="buttonClass">three</button>
<button class="buttonClass">four</button>

</body>
</html>

Your first intuition would be to use padding-bottom but using padding on buttons increases the distance between the text.

It is a good practice to use padding on buttons instead of width and height.

You can use margin-bottom or padding-bottom to put spaces between vertically stacked css buttons.



 <html>
<head>
<style>

.buttonClass
{
    color: blue;
    background-color: yellow;
    
    display:block;
    padding-left: 12.5px;
  padding-right:12.5px;
    margin-bottom:50px;
    border: 2px solid green;
}

</style>
</head>

<body>
<button class="buttonClass">one</button>
<button class="buttonClass">two</button>
<button class="buttonClass">three</button>
<button class="buttonClass">four</button>

</body>
</html>

How to put spaces between vertically stacked buttons in CSS?

2 Answers2