如何用CSS为非段落首内容的按钮设置左侧外边距？

场景与需求 #

我的<p>元素混合了文本、<i>这类短语标记和<button>元素，示例代码如下：

<p>A <i>really</i> great description. <button>Foo</button></p>
<p><a href="/">Link</a>. <button>Bar</button></p>
<p>Description. <button>Baz</button></p>
<p><button>Quux</button></p>

需要实现的效果：

• 给按钮添加左右间距（用margin或类似属性）
• 当段落以按钮开头时，按钮必须和页边距对齐，不能有左侧间距

过往尝试的问题 #

• 使用* + button { margin-left: 0.5rem; }：仅匹配按钮前是其他元素的情况，像第三个示例中按钮是第一个子元素但前置有文本节点的场景，无法匹配。
• 使用button:not(:first-child)：同样不覆盖第三个示例的情况，因为按钮是第一个子元素，但并非段落的首内容。
• 现有临时方案：

p { margin-left: -0.5rem; }
p::first-letter { margin-left: 0.5rem; }
button { margin-left: 0.5rem; }

该方案会破坏段落的边框、背景样式，且依赖::first-letter的匹配规则，稳定性不足。

可行的纯CSS解决方案 #

方案1：Flexbox + Gap（推荐，兼容性好） #

将段落设置为Flex容器，利用gap属性仅在元素间添加间距，同时保证按钮与文本对齐：

p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 控制元素间的水平间距 */
  gap: 0.5rem;
}
/* 给按钮右侧额外加间距，适配按钮后紧跟文本的场景 */
p button {
  margin-right: 0.5rem;
}

优势：

• gap只会在元素之间生成间距，容器边缘的元素（如开头的按钮）不会有额外边距，完美满足对齐需求
• Flexbox兼容性极佳，覆盖绝大多数现代浏览器
• 自动处理换行，文本与按钮会自适应换行，保持排版美观

方案2：:has()选择器（精准控制，现代浏览器支持） #

利用:has()检测段落内容结构，精准调整按钮边距：

/* 给所有段落内的按钮添加左侧间距 */
p button {
  margin-left: 0.5rem;
}
/* 当按钮是段落的第一个子元素，且无前置内容时，移除左侧间距 */
p:has(> button:first-child):not(:has(> *:first-child + button)) button:first-child {
  margin-left: 0;
}

注：:has()目前支持Chrome、Edge、Safari 15.4+，Firefox需手动开启layout.css.has-selector.enabled配置。

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