HTML & CSS
I am trying to align a checkbox to a button vertically and I tried using margin but it doesn't work.
Here is my code:
<input type="checkbox" style="margin-top: 2px" /> <button type="button" style="cursor: pointer; width: 80px; padding: 2px 0 3.5px 0; font-size: 13px">Button</button>
I am basically trying to move the checkbox about 2px down.
Thanks for any help.
EDIT: I guess I should have used the word "horizontally". I was thinking about how "vertical-align" property works.
You might end up chasing your tail a bit on this. Some browsers align these vertically by default, so if you start to add margins for the sake of one browser, others might get thrown off. Is there a particular browser this is not working in?
In Firefox and Chrome, it is not aligned and it is above the middle horizontal line of the button by the same amount. So, moving it down like 2px is what I want to accomplish. In my code, the top margin has no effect on the checkbox and I don't know why.
EDIT: When I add "float: left" to the checkbox, the margin worked. I still don't know why it doesn't work without the float.
This topic is now closed. New replies are no longer allowed.