Why does an <input> element lose its left/right margins when given a width?
css, google-chrome, html
Solution
"The purpose of intrinsic margins is to try to prevent adjacent controls from butting up against one another. Especially with rounded controls this looks terrible. The reason you see the values change is that we only set intrinsic margins when we think it won't disrupt the layout of the page. If the author specifies an explicit height/width on the control, then we assume the designer is needing pixel-precise control, and so we turn the margins off to avoid disrupting the page layout."
https://code.google.com/p/chromium/issues/detail?id=128306#c20
Problem
The following: ``` <!DOCTYPE html> <form> <input type=text> </form> ``` Produces the following box model in Chrome: However, if the input type is styled with a width: ``` <!DOCTYPE html> <form> <input type=text style="width: 100px;"> </form> ``` The left and right margin are removed: Why is this?