为何inline-block元素换行与同行书写会出现布局差异？

你遇到的问题本质是inline-block元素的排版特性导致的：当元素被设置为display: inline-block后，它会同时拥有块级元素的尺寸可控性，以及内联元素的排版规则——浏览器会把HTML代码中inline-block元素之间的空白字符（包括换行、空格、制表符）渲染成一个标准的空格字符。

结合你的代码来看：
你的<p>元素宽度设为父元素的50%，两个<p>的总宽度理论上是100%，刚好填满父容器。但当两个<p>换行书写时，它们之间的换行被浏览器解析成一个空格，这个空格会占据一定的宽度（具体宽度由父元素的字体大小决定），导致两个<p>加上空格的总宽度超过了父元素的100%，第二个<p>就被挤到了下一行。

而当你把两个<p>紧挨着写时，它们之间没有任何空白字符，浏览器不会渲染额外的空格，总宽度刚好是50%+50%=100%，所以两个<p>能并排显示。

这个现象不是<p>元素独有的，任何元素设置为inline-block都会触发相同的表现，核心就是内联排版规则对空白字符的处理。

几种常见的解决方法 #

• 直接去掉inline-block元素之间的空白字符（就是你第二种写法）
• 给父元素设置font-size: 0，同时给inline-block元素重新设置正常的font-size，让空白字符的宽度变为0
• 将父元素设置为display: flex，利用flex布局的特性自动消除空白字符的影响，同时还能更灵活地控制排版

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