CSS 网格之谜：网格项中的填充答案

【问题标题】：A CSS grid mystery: padding in grid itemsCSS 网格之谜：网格项中的填充
【发布时间】：2019-06-23 20:33:19
【问题描述】：

那么，我使用 CSS 网格制作了一个漂亮的电子邮件表单。一切都很好而且很漂亮，除非我尝试在表单元素上应用一些填充。然后事情开始流出网格。

在计算网格项的最终大小时，网格系统似乎没有考虑元素内部的填充。我尝试使用 fr-s 和 auto 来确定这些元素的宽度，以及各种无用的技巧，但没有任何效果。

这是代码和一些屏幕截图，可以帮助大家感受我的痛苦。 :D

在输入字段中没有填充： https://imgur.com/a/NB1RcVS 和 https://imgur.com/a/nz5lvIw

带内边距： https://imgur.com/a/Ak6CvlX 和 https://imgur.com/a/hqLlxBr

<form id="email">
<div class="form-group" id="form-name">
    <label for="name-field">Name</label>
    <input type="text" name="name-field" id="name-field" required>
</div>
<div class="form-group" id="form-address">
    <label for="address-field">Email Address</label>
    <input type="text" name="address-field" id="address-field" required>
</div>
<div class="form-group" id="form-message">
    <label for="message-field">Message</label>
    <textarea name="message-field" id="message-field" cols="32" rows="8" required></textarea>
</div>
<button id="send-button" type="submit" form="email" name="send-it">Send it</button>

还有 CSS：

#email {
    display: grid;
    grid-gap: 2rem;
    grid-template-areas:
    "name address"
    "message message"
    "send send";
    grid-template-columns: 1fr 1fr;
    justify-items: start;
    margin: 1rem auto 0 auto;
    width: 80%;
}

#form-name {
    grid-area: name;
}

#form-address {
    grid-area: address;
}

#form-message {
    grid-area: message;
}

.form-group * {
    display: block;
}

#form-name, #form-address, #form-message {
    width: 100%;
}

#name-field, #address-field, #message-field {
    width: 100%;
}

#name-field, #address-field, #message-field {
    padding: 0.75rem 1.5rem;
}

【问题讨论】：

标签： css html grid frontend web-frontend

【解决方案1】：

#name-field, #address-field, #message-field {
    padding: 10px;
}

或 15px，如果您希望它靠近

【讨论】：

【解决方案2】：

将此添加到代码的顶部

*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}

【讨论】：

是的，缺少的是“box-sizing:border-box”。非常感谢！