input and div width rendering

[noyearzero]

so it had always bothered me that you can't make an input field width: 100% if it had borders or padding. but then it occurred to me that browsers can properly render div widths and they can have padding and borders. i figured if i gave my input fields the same properties as a div it would render the same.

(it should be noted i've been playing around in the inspector part of google chrome and learned a lot about how browsers calculate widths. for example i learned that divs are width: auto not width: 100%. if you give a div a width of 100% it will have the same problem with adding paddings and borders. chrome adds up the width of your left margin, borders, and padding and gives the right margin a negative of that value.)

so i set my css

input[type=text] {
display: block;
margin: 0px;
width: auto;
}

i put margin before width because i want my margins forced to 0 and then my width to be automatically calculated from the left over space.

it never renders as i'd expect. there is always 49px of margin on the right or left (depending on which side i placed a margin of auto). i have no idea where its getting the 49px from. is there any other property i'd need to set to make it act like a div?

[oluoch28394]

try margin:0px 0px;
first o for top and bottom, second is for left and right.

[tedster]

Note, you can drop the units when the rule is for 0, e.g. margin:0 0; or for that matter margin:0;

Zero is the same no matter what!