如何让文本不占满容器宽度？基于wrapper与box1的布局方案

你当前的场景是：.box1嵌套在带有padding-inline: 50px的.wrapper中，希望.box1内的文本不占满其完整宽度，同时你已经尝试了两种不太满意的方案——额外嵌套容器（损失语义化）、用透明浮动伪元素实现（过于取巧）。以下是更合理的最佳实践：

首选方案：直接给文本容器设置内边距/外边距 #

这是最符合语义化、代码最简洁的方式，因为文本本身就在<p>标签内，直接给<p>添加右侧留白即可，完全不需要额外元素或取巧技巧：

.wrapper {
  padding-inline: 50px;
}

.box1 {
  background-color: orange;
}

/* 给p元素设置右侧内边距，控制文本宽度 */
.box1 p {
  padding-inline-end: 100px;
  /* 也可以用外边距：margin-inline-end: 100px; */
}

为什么这是最佳选择： #

• 语义化：无额外冗余标签，完全利用现有文本容器实现需求
• 易维护：代码直观，修改留白数值仅需调整单个属性
• 兼容性：所有现代浏览器及多数旧浏览器都支持padding-inline-end/margin-inline-end（若需兼容极旧浏览器，可替换为padding-right/margin-right）

其他可选方案（适配复杂场景） #

如果你的布局有更灵活的需求，比如动态调整宽度或结合其他布局逻辑，可考虑以下方式：

1. 用CSS calc控制文本容器宽度 #

.box1 p {
  width: calc(100% - 100px);
  /* 也可使用 inline-size: calc(100% - 100px); */
}

这种方式直接限制<p>宽度，效果与设置外边距类似，但需注意<p>默认外边距可能导致的布局偏移。

2. 使用Flex布局 #

若.box1需结合其他元素做横向布局，Flex是更灵活的选择：

.box1 {
  background-color: orange;
  display: flex;
}

.box1 p {
  flex: 0 1 calc(100% - 100px);
}

对比你提到的两种方案 #

• 额外嵌套容器：完全没必要，既增加冗余标签，又破坏语义化结构，不如直接操作文本容器高效
• 透明浮动伪元素：弊端明显——需手动设置伪元素高度，若文本高度超过伪元素，文本会重新占满宽度；同时代码逻辑不直观，后续维护成本高

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