html - Textareas and input texts css

Question

I've noticed whenever I set width: 100%; on a textarea or an input text, they surpass the parent width.

The textarea and text field are surrounded by a padding of 10 pixels within it's container. Is there a way to have it stop once it hits the bounding box surrounding it? What are the best practices to making a width:100%; element?

Answer 1

我建议重置CSS：

textarea, input {
     padding: 0;
     margin: 0;
}

并且请记住，这width:100%将与父宽度匹配，但要考虑边框。您可能想box-sizing在本文中了解：

http://paulirish.com/2012/box-sizing-border-box-ftw/