CSS样式问题：如何让黄色背景仅包裹目标文本而非整行？

问题的核心在于你给<h1>设置了display: block——这个属性会让标题元素默认占据整个父容器的行宽，所以黄色背景自然铺满了整行。要让背景只紧密包裹文本内容，只需要把display属性改成inline-block就搞定了：它既能保留块级元素的特性（比如可以设置边框、圆角、内边距），又只会占据文本本身的宽度。

修改后的完整代码如下：

* { background-color: yellowgreen; } 
h1 { 
  text-align: center; 
  display: inline-block; /* 替换原来的display: block */
  background-color: yellow; 
  border: 3px solid red; 
  border-radius: 25px; 
  /* 可选：加一点点左右内边距，让文本和边框之间更宽松 */
  padding: 0 12px;
}

<h1>This is Main website</h1>

小补充： #

• 如果你尝试用display: inline，虽然也能让背景包裹文本，但inline元素没法很好地控制上下方向的内边距和边框表现，所以inline-block是更合适的选择。
• 加上padding是为了避免文本紧贴着红色边框，提升视觉舒适度，你可以根据需求调整数值。

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