关于去除2个inline-block之间的间距

Posted 2020-09-30

今天要做 这种效果的图。我是用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之后，就可以缩放浏览器页面了。我也很奇怪，暂时还没有找到满意且理解的答案。后续更新。