Reputation: 3964
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;
}
Upvotes: 2
Views: 46985
Reputation: 19797
.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
Upvotes: 1
Reputation: 2851
.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">
Upvotes: 3
Reputation: 2779
add class="button" for each button:
<input class="button" type="button" id="button0" style="color:black; width:100px; height: 50px" />
Upvotes: 2