CSS-在两个div之间添加边距

Question

有没有一种方法可以在两个div之间创建内部空间，而不为每个div添加额外的类，并应用margin-right&margin-left？我希望.list的子级填充容器，但它们之间有一个空格。

null

.list {
  display: flex;
  width: 100px;
  border: 1px solid blue
}

div {
  flex: 1;
  border: 1px solid
}

<div class="list">
  <div>Item</div>
  <div>Item</div>
</div>

null

Answer 1

使用CSS伪class：first-child选择div.list中的第一个div,使用last-child选择最后一个div。

https://developer.mozilla.org/en-us/docs/web/css/pseudo-类

null

.list {
  display: flex;
  width: 100px;
  border: 1px solid blue
}

div {
  flex: 1;
  border: 1px solid
}

.list div:first-child {
  margin-right: 10px;
}

.list div:last-child {
  margin-left: 10px;
}

<div class="list">
  <div>Item</div>
  <div>Item</div>
</div>