如何在HTML5中为段落文本创建带CSS样式的容器盒子

你需要把段落标签嵌套到目标div容器里，或者调整CSS选择器匹配你的段落元素，以下是两种可行方案：

方案1：将段落放入div容器 #

把你的<p>标签放到定义好样式的<div>内部，这样div的边框、内边距等样式就会包裹住段落内容：

修改后的HTML代码：

<div>
  <p style="text-align: center">
      Manfred Mann's Earth Band is an English rock band founded by Manfred Mann, a musician from South Africa. 
      <br> They are known for doing covers of Bruce Springsteen songs.
  </p>
</div>

对应的CSS保持你现有的band.css内容即可。

方案2：给容器添加类名（更规范，避免全局样式冲突） #

如果不想让所有div都应用这个样式，建议给容器添加专属类名，同时调整CSS选择器：

band.css修改为：

.paragraph-box {
   width: 80%;
   padding: 10px;
   border: 5px solid gray;
   margin: 0 auto; /* 可选：让容器水平居中 */
}

HTML代码修改为：

<div class="paragraph-box">
  <p style="text-align: center">
      Manfred Mann's Earth Band is an English rock band founded by Manfred Mann, a musician from South Africa. 
      <br> They are known for doing covers of Bruce Springsteen songs.
  </p>
</div>

这样只会给带有paragraph-box类的div应用样式，不会影响页面中其他div元素。

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