块级元素后内联元素为何换行渲染？技术咨询

这是因为块级元素的核心布局特性：哪怕你给块级元素设置了远小于容器宽度的尺寸，它在正常流里依然会强制结束当前行，让后续元素只能从新的一行开始排列——这里的“独占一行”不是指元素自身宽度占满整行，而是布局逻辑上会触发换行。

拿你测试的代码举例：

<div className="border-2 border-blue-400 w-1/6">Line 1</div>
<span className="border-2 border-emerald-500">Line 2</span>

其中<div>是块级元素，哪怕你用w-1/6把它的宽度限制为容器的1/6，它的布局特性还是会让浏览器在它结束后自动换行，后面的<span>（内联元素）只能从新行开始渲染，哪怕视觉上还有大量剩余空间。

如果想让它们排在同一行，你可以修改<div>的显示类型，比如给它加display: inline-block（或者Tailwind的inline-block类），这样它既能保留块级元素可设置宽高的特性，又能和内联元素在同一行排列。

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