鍍金池/ 問(wèn)答/PHP  Python  HTML/ 為什么tp框架中for循環(huán)標(biāo)簽出來(lái)的圖片沒(méi)有間隔？

為什么tp框架中for循環(huán)標(biāo)簽出來(lái)的圖片沒(méi)有間隔？

<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;
}

示例 ：clipboard.png

怎么才可以使后面3個(gè)循環(huán)出來(lái)的可以和前兩個(gè)一樣有間距？

回答
編輯回答
傲嬌范

margin屬性

2018年7月10日 08:06
編輯回答
瘋浪

你這是因?yàn)閕nline-block造成的邊距問(wèn)題，你看html源碼，for循環(huán)的代碼span的結(jié)束和下一個(gè)開始標(biāo)簽是緊挨著的。
改一下css,在你的span的父級(jí)上加一個(gè)font-size:0;
然后給span樣式加邊距或填充。

建議你去看看 inline-block 的邊距問(wèn)題。這個(gè)是前端里很多人常犯的一個(gè)老問(wèn)題了。

2017年1月14日 09:24