css – 如何在元素之间添加空格以便它们填充容器div？

我想在跨距之间添加空间,以便最左边和最右边的跨距将接近内部div的边缘.我试图添加以下规则,但它没有效果.

span.icon-square{
    margin:0 auto;
}

span.icon-square:first-child{
    margin-left:0;
}

span.icon-square:last-child{
    margin-right:0;
}

我想要实现的目的的说明如下：

那么,我错过了什么？

解决方法

您可以使用FlexBox和justify-content：space-between执行此操作.

.content {
  display: flex;
  justify-content: space-between;
  max-width: 400px;
  margin: 0 auto;
  background: #A0C5E8;
  padding: 10px 0;
}

span {
  width: 50px;
  height: 50px;
  background: black;
}

<div class="content">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>