无需额外容器，如何设置content box的max-width？

在HTML/CSS中，给元素设置max-width时，元素整体（包括背景）都会被限制在该宽度内，比如这段代码：

<section>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo et lorem fermentum tempor. Donec a facilisis orci, eu dictum est. Nullam in porta ligula. Ut vel sem commodo, dignissim libero ut, tincidunt leo. Maecenas non dui sit amet orci aliquam dignissim a pellentesque sem. Nam tempus tincidunt lorem. Integer orci urna, vehicula a ultrices vel, semper non sapien. Donec accumsan molestie nisi non placerat.
  </p>
</section>

section {
  max-width: 30em;
  margin: 0 auto;
  background-color: #3f3;
}

现在需要实现：文本内容宽度受限且居中，同时元素背景占满整个屏幕宽度。常规做法是用外层容器设置背景、内层容器限制宽度，但能不能不用额外容器？有没有直接设置内容盒最大尺寸的CSS属性？

解决方案 #

目前CSS没有专门用于单独限制内容盒最大宽度的属性，但可以通过以下几种方法实现需求，无需额外添加容器：

方法1：利用内边距的动态计算 #

通过padding-inline结合max()函数自动计算左右内边距，让内容区域始终保持最大30em宽度，同时元素本身占满全屏：

section {
  background-color: #3f3;
  padding-inline: max(0px, calc((100% - 30em) / 2));
}

原理：当屏幕宽度大于30em时，左右内边距会自动填充剩余空间，使内容区域刚好为30em并居中；当屏幕宽度小于30em时，内边距为0，内容自适应屏幕宽度。

方法2：直接限制子元素宽度 #

如果元素内部有明确的内容容器（比如示例中的<p>），可以直接给子元素设置max-width和水平居中，外层元素保持全屏宽度：

section {
  background-color: #3f3;
  width: 100%;
}
section > p {
  max-width: 30em;
  margin: 0 auto;
}

这种方法逻辑简单，适合已有明确内容层级的结构。

方法3：使用CSS Grid布局 #

通过Grid的居中特性，让内容区域限制在最大宽度内，外层元素默认占满可用宽度：

section {
  background-color: #3f3;
  display: grid;
  place-content: center;
}
section > p {
  max-width: 30em;
}

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