CSS inline-block & font-size bug All In One

CSS inline-block & font-size bug All In One

如果多个 inline-block 元素存在空格/换行等 whitespace，whitespace 继承父元素的 font-size 导致出现诡异的空白 bug ❌

solutions

1. 把父元素的 font-size 置成 0； 👎 css hack

.parent {
    font-size: 0;
}

2. 只使用 flex / grid， 把子元素 flex-start对齐即可

.parent {
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: center;
}

.parent {
    box-sizing: border-box;
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
}

Inline-block / white-space bug

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

demo

https://codepen.io/xgqfrms/pen/PojNvJo

others

使用 CSS 更改非 inline-block 元素为 inline-block 元素，会有该问题

手动移除空格
使用 margin 负值
仅最后一个字元素闭合标签

.parent {

letter-spacing: 0;

word-spacing: 0;

}

借助 webpack 直接压缩 html 代码的空格

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---