I'm struggling to apply padding to a submit button. I have created a simple example in a JSFiddle:
http://jsfiddle.net/yxr197pa/1/
Below is the code for it:
HTML:
<input type="submit" value="Submit" />
CSS:
input {
padding: 20px;
}
I seem to be missing something really basic, and I am a bit embarrassed that I can't solve this issue on my own. Despite extensive searching, it seems like no one else is facing this problem as I've searched quite thoroughly. I've even come across examples of people adding padding without any trouble. Any assistance would be greatly appreciated. Thank you!
Update
To clarify the problem for those who might be confused by my query: the above code does not change the padding of the button at all. It appears that default padding is applied to the button, but the specified padding simply does not appear. Here's an image illustrating what I see when I input the code above:
https://i.sstatic.net/tyASx.png
This issue has been resolved in a response below, but the root cause remains unclear to me. It seems to be related to my computer setup. I am using an up-to-date Mac OS X. On the other hand, my PC displays the example above perfectly fine. The browser used on my Mac does not affect the rendering of the specified padding either.
However, after examining source code from other websites, I discovered submit buttons that display padding correctly on my Mac, despite having virtually identical code. Check out this link for an example:
So why does the padding show sometimes and not others?