如何设置CSS使div的背景色显示区域小于其内部内容尺寸？

要实现.media-body的灰色背景尺寸小于内部文本内容，可以根据你的实际需求选择以下方案：

方案1：固定容器尺寸（适合背景大小固定的场景） #

块级元素默认宽度撑满父容器、高度随内容撑开，直接给容器设置小于内容实际尺寸的宽高即可，内容默认会溢出背景区域：

.media-body {
  background-color: gray;
  /* 数值可根据你需要的背景大小调整 */
  width: 220px;
  height: 70px;
}

方案2：内部元素负边距（适合背景尺寸随内容动态变化的场景） #

给内部文本元素设置负外边距，让内容向外延伸超出父容器的背景范围，不需要固定容器尺寸：

.media-body {
  background-color: gray;
  /* 内边距控制背景初始大小，可自定义调整 */
  padding: 8px 12px;
}

/* 内部文本向外延伸，超出背景区域 */
.media-body h5,
.media-body .texto-media-body {
  /* 上下左右的外边距数值可根据需要的超出距离调整，负值代表向外延伸 */
  margin: 0 -15px;
}

方案3：通过background-clip限制背景绘制范围 #

利用CSS的background-clip属性控制背景只绘制在内容区，配合内边距让内容可以延伸到无背景的padding区域：

.media-body {
  background-color: gray;
  /* 内边距就是内容超出背景的范围，可自定义调整 */
  padding: 0 20px;
  /* 背景仅绘制在内容区，不覆盖padding区域 */
  background-clip: content-box;
}

内容的提问来源于stack exchange，提问作者luan-peixoto-23