CSS Grid - 输入不考虑填充答案

【问题标题】：CSS Grid - input not respecting paddingCSS Grid - 输入不考虑填充
【发布时间】：2017-02-05 04:54:50
【问题描述】：

我发现在使用CSS Grid Layout 时，inputs 不尊重其包含元素的右侧填充。具体来说，grid-template-colums css 属性似乎是罪魁祸首。

我发现这个问题，除了 CSS Grid Layout，通过box-sizing: border-box 的申请得到了解决。尽管即使应用了这一点并重置了 CSS，我似乎仍然无法解决这个问题。

这是我的 React 应用中行为的缩写代码 sn-p：

这是一个仅使用普通 HTML + CSS 的示例：

我还在我的 React 应用程序中使用 Styled Components 进行样式设置，鉴于上面的 vanilla CSS 测试，我很确定这不会导致这种行为。

【问题讨论】：

【解决方案1】：

如果我对您的理解正确，我认为保证金就是您想要的。而且我没有看到您已将其应用于输入框。我将以下行添加到 CSS 文件中。这是否符合您的要求？

input { margin: 5px; }

【讨论】：

我不认为边距是我在这里寻找的，当我添加上面的行时，我仍然在输入间距的左侧有偏差。
如果您正在寻找的只是在右侧添加边距。右边距：5px;
我的一些表单元素跨越了整个宽度，一些只有一半。所以那些跨过一半的人会得到超宽的排水沟。我得到 CSS Grid 没有完全充实，所以我认为可能需要修改。虽然旨在找到一种更简洁和模式更合适的方法来解决问题，这样我就不必单独为每个表单元素添加特殊类，而不仅仅是将属性应用到父元素。

【解决方案2】：

您可能已经想通了，但是，似乎添加了justify-content property

justify-content: space-around;

CSS 的形式可以解决问题。

【讨论】：

【解决方案3】：

以防万一其他人偶然发现这一点，问题是如果输入是具有由 Chrome 设置的 webkit 外观的类型，这将覆盖某些属性（如填充）。您需要在输入中设置 -webkit-appearance: textfield; 才能按预期设置样式。

【讨论】：