Html 有没有一种方法可以使一个CSS样式的类只能容纳网页上的不同分区图块？

我在一个网页上工作，有各种标题：关于、项目、联系人等

这些标题将位于背景图像的顶部。我想让他们脱颖而出。所以，我想用白色填充背景。 （标题文本为深蓝色。）

问题是，如果我只指定背景色，元素会在页面上延伸。我需要它们每个都有一个自定义的宽度（周围有3倍的白色填充）。我是否必须为每个标题设置一个单独的CSS样式类，并指定宽度

标题都是

元素

以下是我现在使用的CSS样式：

 .sectionTitle{

background-color: #ffffff;
padding: 3px;

} 

---

您的

h3

标记在页面上延伸，因为它们是

块

元素（自然是父元素的100%宽度）

如果您强制您的

h3

显示为

内联块

元素，它们的宽度将缩小到容纳其中文本节点所需的最小值-我想这就是您试图实现的目标

正文{
背景：#e6；
}
.章节标题{
背景色：#ffffff；
填充：3倍；
显示：内联块；
}

一些头衔

如果希望每个标题都有不同的填充，可以为颜色和填充创建单独的类

    .sectionTitle{
      background-color: #ffffff;
    } 
    .padding3{
      padding: 3px;
    } 
    .padding3{
      padding: 2px;
    } 

然后将颜色类指定给每个标题和特定的填充类

    <h3 class="sectionTitle padding2">Hello</h3>
    <h3 class="sectionTitle padding3">Hello</h3>

你好 你好

---

或者，如果您希望每个标题都有相同的填充，只需将它们全部分配给上面提供的css类。

您可以设置一个带有假文本和假图像的代码段、代码笔或小提琴来帮助我们帮助您吗？伪文本/图像：也许您可以声明

h3.sectionTitle{display:inline block；}

，但很难说，因为我对结构和布局以及html和css一无所知。