是否可以在可折叠按钮组中的按钮之间添加边距而不在组周围添加任何边距？答案

【问题标题】：Is it possible to add margin between buttons in a collapsable button group without adding any margin around the group?是否可以在可折叠按钮组中的按钮之间添加边距而不在组周围添加任何边距？
【发布时间】：2018-10-17 18:42:34
【问题描述】：

我有一个带有 n 个按钮的按钮容器。

示例代码：

<div class="button-group">
  <div class= button>
    First
  </div>
  <div class= button>
    Second
  </div>
</div>

.button-group {
  display: flex;
  flex-wrap: wrap;

}

.button {
  padding: 20px 100px;
  border: 1px solid black;
  background-color: red;
}

https://codepen.io/anon/pen/LgQWmE

如何在这些按钮之间添加10px 边距？

适用以下限制：

按钮可能会在某个未知的视口宽度处折叠
按钮组周围不应有边距
我无法使用网格，因为 IE 11 不支持它

【问题讨论】：

只有一排按钮？
@user1283776 使用自定义网格
使用古老的技巧，通过容器上的负边距来抵消侧面的边距......？ codepen.io/anon/pen/BqYRmO
@misorude：太棒了，谢谢！我不知道那个古老的把戏。这是您的代码笔，但也有垂直边距：codepen.io/anon/pen/BqYRmO

标签： html css

【解决方案1】：

您可以将margin-right: 10px 添加到所有.button 元素，然后定位组中的最后一个子元素并删除10px 边距：

body {
margin: 0;
padding: 0;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
}

.button {
  padding: 20px 100px;
  border: 1px solid black;
  background: red;
  margin-right: 10px;
}

.button:last-child {
  margin-right: 0;
}

<div class="button-group">
  <div class=button>
    First
  </div>
  <div class=button>
    Second
  </div>
</div>

【讨论】：