如何在CSS中为元素现有宽度追加宽度？以fit-content为例

你想让div.lists-container h4的宽度在内容宽度基础上再加15px，直接写width: fit-content + 15px是无效的，因为CSS不支持这种语法组合。这里有两种简单的纯CSS实现方案：

方案1：利用内边距（Padding）+ 盒模型控制 #

通过给元素添加左右内边距，配合box-sizing: border-box让内边距算入元素总宽度，精准实现内容宽度+15px的效果：

div.lists-container h4 {
  width: fit-content;
  /* 左右各7.5px，合计额外增加15px宽度 */
  padding: 0 7.5px;
  /* 让内边距包含在width计算内 */
  box-sizing: border-box;
}

方案2：使用inline-block布局 + 内边距 #

如果元素不需要固定为块级，直接设置display: inline-block，它的宽度默认由内容决定，再添加左右内边距即可，无需额外设置盒模型：

div.lists-container h4 {
  display: inline-block;
  padding: 0 7.5px;
}

这两种方案都能达到你要的效果，优先推荐方案2，代码更简洁；如果元素必须保持块级特性，就用方案1。

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