写底部组件的时候，始终做不到和课程demo一样的最左边图标和左边有一定距离

<template>

<div class="foot">

<div>

<img src="../assets/web.png">

<span>首页</span>

</div>

<div>

<img src="../assets/sea.png">

<span>发现</span>

</div>

<div>

<img src="../assets/download.png">

<span>下载</span>

</div>

<div>

<img src="../assets/me.png">

<span>我的</span>

</div>

</div>

</template>

<script>

export default{

data(){

return{}

},

mounted(){}

}

</script>

<style scoped>

.foot{

position: fixed;

bottom: 0;

width: 375px;

z-index: 3;

background: #fff;

display: flex;

justify-content: space-around;

    }

    .foot div{

    font-size: 10px;

    height: 50px;

    display: flex;

    flex:1;

    flex-direction: column;

    justify-content: center;

    align-content: center;

    }

    .foot div img{

    width: 24px;

    }

</style>

自己写的左边图标就完全贴到左边框上去了，还特地在包裹容器里设置了justify-content：space-around，

而课程组件里我看也没有在包裹容器里设置justify-content：space-around，但是就有justify-content：space-around的效果，这是为什么啊，我想要这样的效果该怎么在flex布局中进行修改呢