将表单元素分组在一起

Question

我试图创建两个可用于的css容器类：

• 使用.group垂直对齐表单元素。
• 使用.group.group--inline水平对齐表单元素。

每个for元素都将使用类.group__item来确保表单元素之间的垂直和水平距离为16px。例如：

.group__item { margin-top: 16px; }

但是我想确保.group的整个高度和宽度可以用于表单元素，并且没有不需要的空格。我们的组件周围没有任何边距，可以更容易地正确布局它们。

要取消.group__item上的保证金，我将其作为负余量添加到.group和.group--inline。例如：

.group { margin-top: -16px; }

我想知道给.group容器带来负余量是否有任何负面影响？

＆＃13;

＆＃13;

function toggleGroupBorder() {
  var groups = document.querySelectorAll('.group');
  
  for (var i = 0, j = groups.length; i < j; i++) {
    groups[i].classList.toggle('group--show-border');
  }
}

＆＃13;

.container {
  margin: 32px;
  padding: 32px;
  border: 1px solid #99f;
}

.group {
  margin-top: -16px;
}

.group.group--show-border {
  border: 1px solid #f99;
}

.group .group__item {
  display: block;
  margin-top: 16px;
}

.group.group--inline {
  margin-left: -16px;
}

.group.group--inline .group__item {
  margin-left: 16px;
  display: inline-block;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Helvetica, Arial;
  margin: 0;
}

input {
  height: 32px;
  padding: 0 8px;
}

button {
  height: 32px;
  padding: 0 24px;
  border: none;
}

＆＃13;

<button onclick="toggleGroupBorder();">Toggle Group Border</button>

<h2>Vertical field alignment using <code>.group</code></h2>
<div class="container">
  <div class="group">
    <input class="group__item" type="text" />
    <input class="group__item" type="text" />
    <button class="group__item" >Default</button>      
  </div>
</div>

<h2>Horizontal field alignment using <code>.group.group-inline</code></h2>
<div class="container">
  <div class="group group--inline">
    <input class="group__item" type="text" />
    <input class="group__item" type="text" />
    <button class="group__item" >Default</button>      
    <input class="group__item" type="text" />
    <input class="group__item" type="text" />
    <button class="group__item" >Default</button>      
    <input class="group__item" type="text" />
    <input class="group__item" type="text" />
    <input class="group__item" type="text" />
    <button class="group__item" >Default</button>          
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

或者看到这个CodePen