No, you end up with a button which is as wide as you tell it to be, centered horizontally. If you start taking into account things you leave to assumptions, you would still get a 200px wide button, but it might look as if it wasn't.
<style type="text/css">
.FormButton {
display:block;
width: 100px;
height: 100px;
margin: auto;
font-size:12pt;
}
</style>
<div style="width: 98px; border: 1px solid; margin: 0px; padding: 0px; margin: auto;">
A
</div>
<form>
<div>
<input class="FormButton" type="button" value="01234567890123456789">
</div>
</form>
gives
[ATTACH]4693[/ATTACH]
The div is set to 98px wide, since it also has a 1px border, which gives a total size of: border-left + width + border-right = 1 + 98 + 1 = 100px.
Looking at what information you leave out in your post, I'm guessing you are regularly doing the same kind of assumptions that you expect others to do. For example, you give us a CSS selector based on nothing but the classname "FormButton", but you do not specify what element it is supposed to apply to. An input of type button inside a form might perhaps seem like a safe assumption to do (which I guess is what you expect us to do), but since that would be covered by the CSS selector
form input[type=button] { }
why would you even specify a classname for this? I'm not saying it's invalid, since you might want to style buttons outside of forms in the same way, but if that is the reason, I'd use
form input[type=button], .FormButton { }
so that you can add the class name outside forms and skip it inside of them.
Next up, what other rules apply to whatever element you're dealing with? Does it have padding? If it does and you look at it in FF on XP, you get padding. If you use OSX, you don't. And then there's FF's inner-focus padding of 2px + 2px.
Either way, you should use a full CSS reset. Moreover, using something like FF's Firebug which allows you to inspect computed CSS values helps a lot.
You claim that you specify a width of 200px and end up with a 300 px wide element.
100px_example.png
