Sunil Chaudhry Sunil Chaudhry - 1 year ago 56
jQuery Question

CSS for 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.