HTML中诡异的换行

最近公司的项目中要做静态页面的向导，所以要拉取系统中的静态页面，过程中遇到一个特别怪异的事

代码大致是这样的

<div style="width: 100%">
  <div style="display: inline-block; width: 50%">第一段文字</div>
  <div style="display: inline-block; width: 50%">第二段文字</div>
</div>

按理来说，上述代码现实的效果是两段div对应的文字在同一行，但是显示时却分开为两行
然而，将代码换成下面的形式，就能符合预期了

<div style="width: 100%">
  <div style="display: inline-block; width: 50%">第一段文字</div><div style="display: inline-block; width: 50%">第二段文字</div>
</div>

是不是很奇怪，只是改了换行而已，样式就变了。相信机智的小伙伴已经看出端倪了，就是换行，虽然当初的我以为换行影响的只是代码的格式，但是人家好歹ASCLL码值是10，也是字符啊

所以当两段文字都是50%宽度时，再加上一个换行字符，就超出了100%，显示时就会换行，而不是在一行显示

现在想想自己真够笨的，没意识到这么简单的问题

套用师傅说过的一句话"任何诡异的事背后，往往都是极其简单的原理"。记录一下，防止后续踩坑。