How to put a space between two buttons?

Navigation
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 anyone help me with this part? 

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

I would like a small space between the two.

    
asked by anonymous 21.01.2018 / 21:30

4 answers

0

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

This css tag consists of telling which child element to receive this style.

When you want to put a specific style in element 4 and only in it, but do not want to add another class in HTML , you can use nth-child(4) , and 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 to not use HTML tag to give spaces if you can use CSS for this, as it prolongs the structure harming the site in SEO rankings.

    
21.01.2018 / 22:16
3

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

button{
    margin: 0 15px;
}

When specifying only two values in margin , the first refers to the top / bottom and the second to the 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 the inline style in the element, you can do this: 

         .----------.                  .----------.
<--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 trailing space on the first button only: 

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

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

Do not use span to do this. This is not good practice. It's more for gambiarra.

    
21.01.2018 / 21:45
0

&nbsp; can help you. It would not 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>
    
04.03.2018 / 22:55
-2

A very used technique, to add between the inputs a tag "span" and for the css to 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>

Hope you can help.

    
21.01.2018 / 21:42
How to use the merge statement in sql server Access denied access controller with CodeIgniter