Styled a checkbox like a button - how do I add margin? - css

Question

Styled my checkboxes like buttons as suggested here in this article:
CSS: styled a checkbox to look like a button, is there a hover?
Now I've been trying to add some margin to the buttons. This won't work, as soon as the button is selected, only the area without margin is highlighted. This looks awfull...
#ck-button label span {
text-align:center;
padding:3px 0px;
display:block;
margin: 10px;
}
See here: http://jsfiddle.net/Vq759/
Anyone know how to solve this?
Thanks mates :)

Answer 1

I think you're overcomplicating things with your HTML/CSS, here's a quick re-do with how I'd style a checkbox (which is completely customizable to suit anything you need).
Simple HTML:
<input type="checkbox" value="1">
<label>Red</label>
I start styling the checkbox by simply hiding it:
input[type="checkbox"] {
display: none;
}
This leaves optional events/states like :checked intact.
From here I style the entire object to suit my needs, for example:
input[type="checkbox"] + label {
display:inline-block; /* or block */
line-height:normal;
cursor:pointer;
padding: 3px 14px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
margin: 40px 100px 10px 40px; /* however you please */
}
/* hover event */
input[type="checkbox"] + label:hover {
border-color: #000;
background-color: #911;
color: #fff;
}
/* checked checkbox */
input[type="checkbox"]:checked + label {
border-color: #000;
background-color: #888;
color: #fff;
}
Margin works flawlessly.
Fiddle: http://jsfiddle.net/8e5Xa/

Answer 2

If you are trying to make the button essentially bigger and still make the whole thing highlight onClick, use padding instead of margin:
#ck-button label span
{
padding: 10px;
}
Margin puts white-space around an element. Padding puts white-space within an element.
JSFiddle

Answer 3

The + operator in this selector:
#ck-button input:checked + span
.. does not function properly in older browsers. It sort of works, but has bugs when doing the kind of thing you're trying to do here (in particular, changing the :checked state of the adjacent element). Sorry, but what you're trying to do is impossible if you want all browsers to be supported.
You will need to use JavaScript if you want the text colour of the span to change when selected in all browsers.
Alternatively, you could pick a colour scheme where it looks OK if the span doesn't change colour, but do change the colour in browsers that support it.

Answer 4

If it changing the margin of the button, do this:
#ck-button {
margin:40px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
Also have a look at this:
This is the box-model for every HTML element