如何缩短文本两侧多余的CSS背景颜色？

问题描述 #

当前使用以下CSS给<p>标签设置背景样式时，文本两侧的背景会铺满整个父容器宽度，希望让背景仅包裹文本区域：

p {
    background-color: #CC3340;
    text-align: center;
    border-radius: 100px;
    font-size: 1.2em;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: white;
}

解决方案 #

核心思路是让<p>元素的宽度仅适配文本内容，而非默认占满父容器宽度，以下两种方法均可实现：

方法1：使用inline-block + 父容器居中 #

将<p>设置为inline-block使其宽度由内容决定，同时给父容器添加text-align: center实现整体居中：

/* 给父容器添加样式（如body或外层div） */
.parent-container {
  text-align: center;
}

p {
    background-color: #CC3340;
    border-radius: 100px;
    font-size: 1.2em;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: white;
    /* 关键修改 */
    display: inline-block;
    /* 可选：添加内边距优化文本与背景的间距 */
    padding: 0.5em 1.5em;
}

方法2：使用width: fit-content + 自动外边距 #

利用fit-content属性让元素宽度适配内容，再通过margin: 0 auto实现居中：

p {
    background-color: #CC3340;
    text-align: center;
    border-radius: 100px;
    font-size: 1.2em;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: white;
    /* 关键修改 */
    width: fit-content;
    margin: 0 auto;
    /* 可选：添加内边距优化视觉 */
    padding: 0.5em 1.5em;
}

原理说明 #

默认情况下<p>是块级元素，会自动占据父容器的全部横向宽度，因此背景会铺满整个宽度。通过上述修改，元素宽度被限制为内容所需的最小宽度，背景自然就仅包裹文本区域了。

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