如何修复HTML换行编写导致的行内元素布局显示异常问题？

问题原因 #

两种HTML渲染效果不一致的核心原因是：canvas默认属于行内块级元素，格式化书写的HTML中，标签之间的换行、缩进会产生空白字符，浏览器会将这类空白字符渲染为额外间隙，而压缩为单行的HTML没有这类空白字符，因此呈现出预期效果。

解决方案 #

不需要修改原有.crate的CSS规则，只需要新增以下任意一段CSS即可实现一致的渲染效果：

方案1：使用Flex布局（兼容性好，无副作用）

给包裹canvas的父容器开启Flex布局，会自动忽略元素之间的空白字符：

div:has(> .crate) {
  display: flex;
}

如果你的浏览器不支持:has选择器，也可以给所有包裹canvas的div添加自定义类名（比如canvas-group），然后修改为：

.canvas-group {
  display: flex;
}

方案2：消除空白字符尺寸

将父容器的字体大小设为0，直接让空白字符的渲染尺寸变为0，适合不需要在父容器内展示文字的场景：

div:has(> .crate) {
  font-size: 0;
}

以上两种方案都可以保留原HTML的整洁格式化写法，同时和压缩单行HTML的渲染效果完全一致。

内容的提问来源于stack exchange，提问作者Alexandra Danith Ansley