1. 程式人生 > >關於去除2個inline-block之間的間距

關於去除2個inline-block之間的間距

mage 父親 更新 com lock -1 記錄 between 記憶

今天要做 這種效果技術分享的圖。我是用span做的 圖文與圖文按鈕。因為行內元素沒有width與height,(雖然可以用padding撐大),本人更喜歡用width與height。於是用了display:inline-block將span變為行內塊級元素。之後兩個span之間出現了一些間距。谷歌了一下找到了一些方法。https://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements這裏提供了4種方法。我用了其中兩種可行,記錄一下,加強記憶吧。

1.對左邊的span加margin-right:-4px(原博客中說是2個inline-block之間的間距是4px)。可行。

2.對2個span的父盒子加font-size:0;再對這兩個span分別設置字號。可行。

再記錄一下今天遇到的一個問題:

一個大盒子div-parent與屏幕同寬,兩個子盒子:div-left與div-right,兩個子盒子按比例分父親的width,div-left左浮動,div-right右浮動。當瀏覽器頁面縮小之後,div-right掉下去了。掙紮了許久,給div-parent設置了min-width之後,就可以縮放瀏覽器頁面了。我也很奇怪,暫時還沒有找到滿意且理解的答案。後續更新。

關於去除2個inline-block之間的間距