Sunil Chaudhry Sunil Chaudhry - 2 years ago 77
Javascript Question

Auto margin among buttons in div on different resolutions

I have 3 buttons in a

, while checking on different resolutions its responsive, but on some screens last button comes under first two buttons without any margin among them.

Is there any way to provide this margin without using media queries.

image attached

Answer Source

You can simply use margin-bottom on the buttons. Make sure that the buttons are of display: inline-block;:

.btn {display: inline-block; margin: 0 0 10px; width: 200px; text-align: center; border-radius: 10px; padding: 5px; border: 0;}
.one {background: #99f;}
.two {background: #9f9;}
<button class="btn one">One</button>
<button class="btn one">Two</button>
<button class="btn two">Three</button>


enter image description here

You may adjust the margin-bottom to the space between the buttons.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download