HTML input textbox with a width of 100% overflows table cells

Question

Does anyone know why the input elements with a width of 100% go over the table\'s cells border.

In the simple example below input box go over the table\'s cells border,

Answer 1

Width value doesn't take into account border or padding:

http://www.htmldog.com/reference/cssproperties/width/

You get 2px of padding in each side, plus 1px of border in each side.
100% + 2*(2px +1px) = 100% + 6px, which is more than the 100% child-content the parent td has.

You have the option of:

• Either setting box-sizing: border-box; as per @pricco's answer;
• Or using 0 margin and padding (avoiding the extra size).