CODEWITHSUNDEEP
html
Nagaraj C K
Nagaraj C K

Reputation: 141

Spacing between two buttons inside a DIV

I have a DIV which contain some buttons. I want 16px spacing between these buttons inside this DIV. Can someone please tell me how to do this?

Upvotes: 10

Views: 162709

Answers (7)

Bony2212
Bony2212

Reputation: 1

Two button between space using   command

<div class="split left">
    <div class="centered">
        <button class="your class" style="background-color: #4caf50; border: none; color: white; padding: 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px;" type="button">&nbsp;
            <a href="tel:1234567890">Call Now</a>
        </button>
    </div>&nbsp;
</div>

Upvotes: 0

Arjjun
Arjjun

Reputation: 1301

Here is a JSX example: Use margin right css tag

     -`
          <Link to="#" id="buyButton" className="btn btn-primary mt-2 mr-2">
            Buy this
          </Link>`

          '<Link to="#" id="buyButton" className="btn btn-primary mt-2 mr-2">
           Buy that
          </Link>`

(margin top and margin right) mt- mr comes from cssbootstrap. Find more here https://getbootstrap.com/docs/4.0/utilities/spacing/

Upvotes: 0

Kheema Pandey
Kheema Pandey

Reputation: 10265

you can simply add margin on input tag. Check the DEMO.

input[type="submit"]{margin:0 16px;}
input[type="submit"]:last-child{margin-right:0;} /*Remove the margin from last input field*/

Upvotes: 0

ovunccetin
ovunccetin

Reputation: 8663

You can use margin-right as follows:

<div class='myDiv'>
    <button style='margin-right:16px'>Button 1</button>
    <button style='margin-right:16px'>Button 2</button>
    <button>Button 3</button>
</div>

Upvotes: 13

Dan Bartlett
Dan Bartlett

Reputation: 173

Set up a div, float the buttons and then add a margin on the first button

<div>
  <a class="button_1">
  <a class="button_2">
</div>

CSS:

div a {
  float: left;
}
div .button_1 {
  margin-right: 16px;
}

Upvotes: 0

Youness
Youness

Reputation: 1495

in the css : 

.Container input{ /* You Can Name it what you want*/
margin-right:16px;
}
.Container input:last-child{
margin-right:0px;
/*so the last one dont push the div thas giving the space only between the inputs*/
}

give that css class to the div :

<div class="Container "><input........</div>

Upvotes: 17

blurstream
blurstream

Reputation: 467

this could be your scenario:

<div>

    <input style="margin-right: 16px" type="submit">

    <input style="margin-right: 16px" type="submit">

    <input style="margin-right: 16px" type="submit">

</div>

each submit button has a margin right of 16px for the next one.

Upvotes: 3

Related Questions