为何换行放置div标签会导致HTML/CSS布局异常？

这个问题的核心是HTML空白字符的渲染规则在搞鬼：

• 当你把.im-content和父级.im-container写在同一行时，两个元素之间没有额外的换行、空格等空白字符，浏览器解析时不会生成额外的占位空间，布局完全按照元素本身的尺寸计算，图片缩放逻辑能正常工作。
• 一旦把.im-content换行单独放置，HTML里的换行会被浏览器解析成一个空白字符（空格）。如果你的布局依赖了inline-block、flex这类对空白敏感的布局方式，这个空白字符会被当作inline元素占据额外水平空间，直接打乱原本的宽度计算、元素定位逻辑——比如导致父容器可用宽度被压缩，或者元素对齐偏移，最终表现为图片无法正常缩放、位置下移。

举个实际场景：如果.im-container设置了inline-block，换行产生的空白会让它和.im-content之间多了一个空格的宽度，原本的百分比宽度计算就会因为这个额外空间溢出，图片缩放自然出问题。

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