Putting margins between Buttons

Question

I want to put margins/spacing between each of these four Buttons. I am struggling a bit with the css. The following code does not give me space between each Button. Does anyone know what I need to change?

practice.html

<div>
    <input type="button" id="button0" style="color:black; width:100px; height: 50px" />    
    <input type="button" id="button1" style="color:black; width:100px; height: 50px"  />
    <input type="button" id="button2" style="color:black; width:100px; height: 50px"  />    
    <input type="button" id="button3" style="color:black; width:100px; height: 50px" />
</div>

practice.css

.button{
    margin: 20px;
}

Solution 1

add class="button" for each button:

<input class="button" type="button" id="button0" style="color:black; width:100px; height: 50px" />

Solution 2

.button is responsible for class. You should write

button {margin: 20px;}

Thats all :). Remember that button should have display: block or display: inline-block, so the element can render margin property properly.

---

Example of different CSS selectors:

button {} // <button>
.buttonclass {} // <button class="buttonclass">
#buttonid {} // <button id="buttonid">

Solution 3

.button is a class selector and you have no classes set. button as a selector won't work with the given HTML as the element is input. The correct css would be

input[type="button"]
{
    margin:20px;
}

input[type="button"] {
  color: black;
  width: 100px;
  height: 50px;
  margin: 20px;
}

<div>
  <input type="button" id="button0" />

  <input type="button" id="button1" />
  <input type="button" id="button2" />

  <input type="button" id="button3" />
</div>

From your comments it sounds like there is another style being applied from somewhere. You may need to make a more specific selector.

Try

div input[type="button"]
{
    margin:20px;
}

Also use Chrome Developer tools or Firebug for Firefox to inspect the buttons to see what styes are being applied to your buttons. Don't forget to flush your cache as well (ctr +f5) as CSS is cached by the browser.

More info on getting started with CSS Selectors