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

前端之家收集整理的这篇文章主要介绍了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>

猜你在找的CSS相关文章