Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

input and div width rendering



2:27 am on Mar 6, 2009 (gmt 0)

5+ Year Member

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?


3:28 am on Mar 6, 2009 (gmt 0)

5+ Year Member

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


4:37 am on Mar 6, 2009 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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!


Featured Threads

Hot Threads This Week

Hot Threads This Month