html格式的文本框超出了表单的边界

Question

我在HTML中创建一个包含两个文本框和一个文本区域的表单，我希望所有三个元素共享一个公共宽度值。但是，如果我使用width: 100%，指的是表单宽度的100％，则文本框会超出表单的右边框。 （图片链接中的红色边框表示表格边框）。

照片：

正如您在上图所示，文本框延伸到表单的右边框，大约是表单填充的一半。无论如何都要使文本框正确显示（在表单周围填充正确的填充）？

此外，非常仔细地看出<textarea>框的宽度略小于其他框（约2px）;但是，它设置为相同的宽度（100％）。是什么原因引起了这个？

这是我的代码：

CSS：

form
{
    width: 600px;
    margin: 0px auto;
    padding: 15px;
    border: 1px dashed red;
}

input[type=text], input[type=email], textarea
{
    display: block;
    padding: 10px;
    font-size: x-large;
}

input[type=text], input[type=email]
{
    width: 100%;
    margin-bottom: 15px;
}

textarea
{
    width: 100%;
}

HTML：

<form id="frmContact">
    <input type="text" id="txtName" name="txtName" placeholder="Name *">
    <input type="email" id="txtEmail" name="txtEmail" placeholder="Email *">
    <textarea id="txtComments" name="txtComments" placeholder="Comments *"
                  maxlength="500"></textarea>
</form>

谢谢！

Answer 1

默认情况下，元素的padding未包含在其width / height维度中。在您的示例中，元素超出了父元素，因为元素的每一侧都有10px填充。

100% + 20px != 100%

您可以向元素添加box-sizing: border-box，以便在元素的padding / width计算中包含height。

Updated Exmaple

input[type=text], input[type=email], textarea {
    display: block;
    padding: 10px;
    box-sizing: border-box;
    font-size: x-large;
}