如何让CSS的background-color仅覆盖元素自身尺寸不占满整行

div 是默认的块级元素（display: block），块级元素的宽度默认会占满父容器的整行宽度，因此设置的背景色会铺满整行，无法仅贴合内部文本的尺寸。另外你提供的HTML代码存在语法错误，div的闭合标签应为</div>，否则会导致渲染异常。

你可以根据实际布局需求选择以下任意一种方案：

• 方案1：设置为行内块元素
  给div添加display: inline-block属性，行内块元素的宽度默认由内部内容撑开，不会自动占满整行，背景色会刚好覆盖内容区域。

  div {
    background-color: blue;
    /* 可选：设置文字颜色为白色，提升蓝色背景下的可读性 */
    color: #fff;
    display: inline-block;
  }
  

  特性：设置后div不会独占一行，后续的行内、行内块元素会和它排列在同一行。

• 方案2：设置内容适配宽度
  保留div的块级特性，通过width: fit-content让元素宽度完全由内部内容决定，既可以让背景色贴合内容，也能让div保持独占一行的块级特性。

  div {
    background-color: blue;
    color: #fff;
    width: fit-content;
  }
  

  特性：div仍然是块级元素会独占一行，宽度随内部文本自动调整，适合需要元素单独成行的场景。

• 方案3：设置为行内元素
  给div添加display: inline属性，行内元素的宽度完全由内容撑开，也能实现背景贴合内容的效果。

  div {
    background-color: blue;
    color: #fff;
    display: inline;
  }
  

  特性：行内元素无法直接设置固定宽高、上下外边距/内边距，仅适合不需要调整元素尺寸、不需要控制上下间距的简单场景。

修正后的基础HTML结构参考：

<div>text is here</div>

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