为什么tp框架中for循环标签出来的图片没有间隔？

Question

<span class="f_star">
    <img src="Application/Service/View/Public/img/star_fff.png" width="100%" alt="">
</span>
<span class="f_star">
    <img src="Application/Service/View/Public/img/star_fff.png" width="100%" alt="">
</span>

<for start="0" end="3">
    <span class="f_star">
        <img src="Application/Service/View/Public/img/star_fff.png" width="100%" alt="">
    </span>
</for>

CSS：

.f_star {
    width: 14px;
    height: 14px;
    display: inline-block;
    border-radius: 3px;
    background: #FF9C01;
    padding: 2px;
    text-align: center;
    line-height: 10px;
}

示例 ：

怎么才可以使后面3个循环出来的可以和前两个一样有间距？

Answer 1

你这是因为inline-block造成的边距问题，你看html源码，for循环的代码span的结束和下一个开始标签是紧挨着的。
改一下css,在你的span的父级上加一个font-size:0;
然后给span样式加边距或填充。

建议你去看看 inline-block 的边距问题。这个是前端里很多人常犯的一个老问题了。

Answer 2

margin属性