网格系统-当我添加相同大小的内部输入时，行与列之间的间隙不起作用

Question

网格系统-当我添加相同大小的内部输入时，行和列之间的间隙不起作用。

当我创建网格系统并在它们和内部之间添加一些间隙时，添加输入

height: 100%;
width: 100%;

它包含所有没有间隙大小的整个大小，它应该更小，不会从间隙中获取额外的大小

​

.formOuter > .form {
  padding: 12px 25% 10px 25%;
  display: grid;
  grid-template-areas: "grid-1 grid-2" "grid-3 grid-3" "grid-4 grid-4";
  grid-gap: 6px;
}

.formOuter > .form > .grid-1,
.formOuter > .form > .grid-2,
.formOuter > .form > .grid-3 {
  position: relative;
  height: 40px;
}

.formOuter > .form > label > input {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.formOuter>.form>.grid-1 {
  grid-area: grid-1;
}

.formOuter>.form>.grid-2 {
  grid-area: grid-2;
}

.formOuter>.form>.grid-3 {
  grid-area: grid-3;
}

.formOuter>.form>.grid-4 {
  grid-area: grid-4;
}

      <div class="formOuter">

        <div class="form">

          <label class="grid-1">
            <input type="text">
          </label>

          <label class="grid-2">
            <input type="text">
          </label>

          <label class="grid-3">
            <input type="text">
          </label>

          <input type="submit" class="grid-4">

        </div>

      </div>

​

Answer 1

问题出在默认的input规则-- padding: 1px 2px;。就在这里：

input[type="text" i] {
    padding: 1px 2px;
}

我通过将值设置为0- padding: 0;来覆盖此规则，并且，为了包括input的宽度和高度的边距和边框的值，我添加了box-sizing: border-box;。

结果，通过两行css规则(用于选择器.formOuter > .form > label > input)解决了这个问题：

padding: 0;
box-sizing: border-box;

​

.formOuter > .form {
  padding: 12px 25% 10px 25%;
  display: grid;
  grid-template-areas: "grid-1 grid-2" "grid-3 grid-3" "grid-4 grid-4";
  grid-gap: 6px;
}

.formOuter > .form > .grid-1,
.formOuter > .form > .grid-2,
.formOuter > .form > .grid-3 {
  position: relative;
  height: 40px;
}

.formOuter > .form > label > input {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  
  padding: 0;
  box-sizing: border-box;
}

.formOuter>.form>.grid-1 {
  grid-area: grid-1;
}

.formOuter>.form>.grid-2 {
  grid-area: grid-2;
}

.formOuter>.form>.grid-3 {
  grid-area: grid-3;
}

.formOuter>.form>.grid-4 {
  grid-area: grid-4;
}

<div class="formOuter">

        <div class="form">

          <label class="grid-1">
            <input type="text">
          </label>

          <label class="grid-2">
            <input type="text">
          </label>

          <label class="grid-3">
            <input type="text">
          </label>

          <input type="submit" class="grid-4">

        </div>

</div>

​