Css 元素之间的神秘空间，尽管仅使用边框大小：边框框

所以我不明白为什么将div设置为55%，img设置为45%会导致图像移到下一行。以下是HTML：

<section class="explanation-paragraphs-section">
    <div class="explanation-paragraphs-div">
        <h2>blah blah blah</h2>
        <p>blah blah blah</p>
        <p>blah blah blah</p>
    </div>
    <img class="explanation-paragraphs-right-img" src="./img/office-building.jpg">
</section>

---

将img的宽度设置为44.5%是一个可行的方法，但我无法计算是什么导致了额外的宽度，从而将img的宽度设置为45%会导致img移动到下一行。

在div之后，图像之前删除换行符：

<section class="explanation-paragraphs-section">
    <div class="explanation-paragraphs-div">
        <h2>blah blah blah</h2>
        <p>blah blah blah</p>
        <p>blah blah blah</p>
    </div><img class="explanation-paragraphs-right-img" src="./img/office-building.jpg">
</section>

废话废话
废话废话

废话废话

---

工作演示：

与

内联

元素类似，

内联块

元素之间的

HTML

中的空格和换行符将被视为单个空格

您必须删除这些元素，或者将父元素

font-size

设置为

0

——这在大多数情况下都不是一个实用的解决方案

不使用

内联块

，您可以

将
浮动到
左侧
和
浮动到
右侧


或者，如果浏览器支持不是问题，您可以在其容器上应用
display:flex
将相邻的内联块元素视为相邻的其他内联元素。例如，一些跨度彼此相邻，代码中带有空格，例如：

<span>Hi</span> <span>There</span> <span>Friend</span>

请注意，您的代码中
div
和
img
之间没有空格。
为了解决删除内联块空格的问题，删除代码块之间的换行符的选项并不总是可行的，尤其是在CMS创建块的情况下。将字体大小设置为0也很有问题。这里有一个指向画笔的链接，它演示了一个更有用的CSS修复方法：
除非元素之间绝对没有空间（即，
），否则，
内联块
在元素之间有固有的间距。看看你能做些什么来缓解这个问题。好吧，我没有意识到“无空白”这个词适用于除
等以外的物品。谢谢！只是一个“元”建议。你的标题对于寻找类似问题解决方案的人来说不是很有用。我建议将标题更新为更能描述实际问题的内容。好建议，谢谢！“已解决”不是好问题标题的一部分。这个标题现在似乎是对一个未知问题的回答。
<span>Hi</span> <span>There</span> <span>Friend</span>

<span>Hi</span><span>There</span><span>Friend</span>

<div class="explanation-paragraphs-div">
        <h2>blah blah blah</h2>
        <p>blah blah blah</p>
        <p>blah blah blah</p>
    </div><img class="explanation-paragraphs-right-img" src="./img/office-building.jpg">
         ^^