Tailwind的space-*-*类导致自定义网格布局错乱该如何解决？

问题根因 #

• 你采用inline-block实现列布局时，HTML中列元素之间的换行、空格会被浏览器渲染为4px左右的空白字符，占用额外宽度导致总宽度超出父容器，因此第一个元素被挤压换行
• inline-block元素默认vertical-align属性值为baseline，而非顶部对齐，不同内容高度的盒子会出现高度错位
• 计算列宽时没有把横向间距、空白字符的额外宽度纳入计算，进一步导致列宽不一致、布局溢出

修复方案 #

方案1：使用Grid布局（最推荐） #

Tailwind内置了完善的Grid布局工具，原生支持间距设置，完全规避inline-block的布局缺陷：

1. 给网格父容器添加grid grid-cols-3 gap-x-4 gap-y-4类，grid-cols-3指定为3列布局，gap-x/gap-y分别设置x轴、y轴间距，不需要手动计算宽度
2. 子列元素不需要额外设置宽度、横向margin类，会自动适配容器宽度

方案2：保留inline-block实现的调整方案 #

如果必须使用inline-block实现，做以下三处修改即可：

• 消除空白字符影响：给父容器添加text-[0]类将字体大小设为0，再单独给子列元素设置实际需要的字体大小；也可以直接将所有列元素的HTML代码连写，去掉元素之间的换行和空格
• 修正垂直对齐：给所有子列元素添加align-top类，将垂直对齐方式设为顶部对齐，解决高度错位问题
• 修正宽度计算：如果设置了横向margin，需要在列宽里减掉margin的总宽度，比如3列布局下每列设置了mx-2（左右各8px，总间距16px），就将列宽从w-1/3调整为w-[calc(33.333% - 16px)]

内容的提问来源于stack exchange，提问作者user5405648