如何用display: inline-block实现带行间距的多行文本组件？

首先明确：display: inline-block完全不可行，它会把整个<code>变成一个独立的块级容器，背景色会填充整个元素的高度（包括你设置的line-height带来的行间距），根本做不到背景只覆盖单行、行间留空白的效果。

要实现你要的效果，完全不需要修改<code>的display属性（保持默认的inline即可），只需要加一个CSS属性配合line-height就行：

code {
  background-color: aqua;
  line-height: 1.5; /* 这个值控制行间空白的大小，按需调整 */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* 兼容Chrome、Safari等webkit内核浏览器 */
}

原理很简单：

• 默认的<code>是inline元素，原本换行后背景会跟着文本走，但默认情况下背景会在换行处连在一起；
• box-decoration-break: clone会强制让inline元素的背景、边框等样式逐行单独渲染，行间距的部分不属于元素的背景区域，自然就出现了行间空白，同时背景只覆盖每行文本的范围。

之前你看到的用display: inline的示例，本质就是利用了inline元素的这个特性，再配合box-decoration-break来实现单行背景的效果。

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