How to put a space between two buttons?

Asked

Viewed 16,718 times

2

I have this code:

<!DOCTYPE HTML>
<HTML>
    <head>
    </head>
    <header>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </header>
            <body>
                  <Title>Lorem ipsum</Title></b><
                    <article>Phasellus ullamcorper turpis in vehicula dictum. Pellentesque ultrices ultrices aliquam. Sed gravida nulla elit, non commodo enim porta id. Morbi vitae mauris lacus. Integer mi ex, mollis id ornare sed, tincidunt a nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut porttitor orci. Nulla ut laoreet est. Nunc faucibus mauris libero, eget aliquet sapien suscipit eget. Praesent elementum, velit eu ullamcorper blandit, massa justo fermentum est, quis euismod neque neque non felis.</article>

                    <h3>WARNING!</h3>
                        <section> Nunc faucibus mauris libero, eget aliquet sapien suscipit eget. Praesent elementum, velit eu ullamcorper blandit, massa justo fermentum est, quis euismod neque neque non felis.</section></n>

                    <input type='button' value='Accept'> <input type='button' value='Decline'>

      </body>

</HTML>

Could someone help me with this part? 

<input type='button' value='Accept'> <input type='button' value='Decline'>

I’d like to put a small gap between the two.

html5 button

4 answers

3

You can create a space on both sides (left/right) with margin:

button{
    margin: 0 15px;
}

By specifying only two values in margin, the first refers to top/bottom (up/down) and the second to right/left (right/left).

The above CSS code creates a space of 15 pixels to the left and right of the element.

If you want to add style inline in the element, you can do so:

         .----------.                  .----------.
<--15px--|  button  |--15px--><--15px--|  button  |--15px-->
         .----------.                  .----------.

<input style="margin: 0 15px;" type='button' value='Accept'><input style="margin: 0 15px;" type='button' value='Decline'>

Or you can create a space on the right just at the first button:

.----------.         .----------.
|  button  |--15px-->|  button  |
.----------.         .----------.

<input style="margin-right: 15px;" type='button' value='Accept'><input type='button' value='Decline'>

Don’t use a span to do this. It’s not a good practice. It’s more for gambiarra.

  • 'Cause span wouldn’t be a good practice?

  • 2

    @alxwca Why it is unnecessary to use an element just to create a space.

  • Yes, I understand that! but with span it’s easier;

  • This refers in the economy of lines isn’t it ? I thank you for your help, everything went right here and even space was what I wanted. Hugs.

  • @alxwca Easier does not mean the right and best. If you want to learn to write code, try to do the right thing possible.

  • @dvd in my projects I always look for the best practices, but today I use so much css framework; but the discussion is valid and thanks for the clarification.

  • @Felipe It’s not about economics, it’s about doing the right things and not using one thing to do another. A ping-pong table also serves as a dining table, but it is not a dining table. As I said in the comment above, you have to try to make things right.

Show 2 more comments

0


When I add buttons in projects and consequently there will be the need to have another next to, I work with nth-child() and nth-last-child().

That "tag" of css consists in telling which child element will receive this style.

When you want to put a specific style in element 4 and only in it, but you don’t want to add another class in HTML, you can use the nth-child(4), and the same with the nth-last-child().

REMEMBER

You will always have to specify the element number within the parentheses to apply the style.

Ex: 

input{ /*-aplica por padrão a margin em todas tags input-*/
   border:none;
   background:#fafafa;
   color:000;
   margin:0 1em 0 0;
}
input:nth-child(2){ /*-irá mudar o bg e color do segundo input-*/
   background: #000;
   color: #fff;
}
input:nth-last-child(1){ /*-irá retirar a margin da última tag input-*/
   margin: 0;
}

IMPORTANT: Remember not to use HTML tag to give spaces if you can use CSS for this, as it prolongs the structure by damaging the site in the SEO ranking.

  • I never knew about these tags, I’m starting to program HTML/CSS so I know more of the basics anyway.

  • @Felipe, a site that will help you a lot is this one regarding CSS and some HTML, too. http://www.maujor.com/

0

The &nbsp; can help you. I wouldn’t create another html element or another css class.

<!DOCTYPE HTML>
<HTML>
    <head>
    </head>
    <header>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </header>
            <body>
                  <Title>Lorem ipsum</Title></b><
                    <article>Phasellus ullamcorper turpis in vehicula dictum. Pellentesque ultrices ultrices aliquam. Sed gravida nulla elit, non commodo enim porta id. Morbi vitae mauris lacus. Integer mi ex, mollis id ornare sed, tincidunt a nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut porttitor orci. Nulla ut laoreet est. Nunc faucibus mauris libero, eget aliquet sapien suscipit eget. Praesent elementum, velit eu ullamcorper blandit, massa justo fermentum est, quis euismod neque neque non felis.</article>

                    <h3>WARNING!</h3>
                        <section> Nunc faucibus mauris libero, eget aliquet sapien suscipit eget. Praesent elementum, velit eu ullamcorper blandit, massa justo fermentum est, quis euismod neque neque non felis.</section></n>

                    <input type='button' value='Accept'>&nbsp;<input type='button' value='Decline'>
                    <br>
                    <input type='button' value='Accept'>&nbsp;&nbsp;<input type='button' value='Decline'>
                    <br>
                    <input type='button' value='Accept'>&nbsp;&nbsp;&nbsp;<input type='button' value='Decline'>

      </body>

</HTML>

-2

A widely used technique, add between inputs a "span" tag and by css control this spacing;

.espaco {
  padding-left: 50px;
}
<html>

<body>
  <h3>WARNING!</h3>
  <section> Nunc faucibus mauris libero, eget aliquet sapien suscipit eget. Praesent elementum, velit eu ullamcorper blandit, massa justo fermentum est, quis euismod neque neque non felis.</section>
  </n>

  <input type='button' value='Accept'> <span class="espaco"></span><input type='button' value='Decline'>

</body>

</html>

I hope it helps you.

  • I do not think I deserved this vote against since the answer offers a concrete, verifiable and replicable solution.

Browser other questions tagged html5 button

You are not signed in. Login or sign up in order to post.