求助：如何为复选框表单添加边框并使边框避开<p>标签

想要实现边框碰到

就停止不穿过的效果，最简便的方法是让

标签覆盖在容器的边框上，具体步骤如下：

• 给表单外层容器设置border: 1px solid #000，同时预留足够的内边距，避免内容贴边框
• 给

  标签设置和页面背景一致的底色，通过负margin把它向上移动，让它覆盖住容器的顶部边框，再给

  左右加些内边距，这样视觉上边框就像在

  位置断开了

示例代码：

<!-- HTML结构 -->
<div class="checkbox-form">
  <p>你的标题文本</p>
  <div class="checkboxes">
    <label><input type="checkbox"> 选项一</label>
    <label><input type="checkbox"> 选项二</label>
    <label><input type="checkbox"> 选项三</label>
  </div>
</div>

/* CSS样式 */
.checkbox-form {
  border: 1px solid #000;
  padding: 25px 15px 15px; /* 顶部多留padding给标题 */
  width: 300px;
}

.checkbox-form p {
  background: #fff; /* 必须和页面背景色一致 */
  margin: -35px 0 15px; /* 负margin向上移动，覆盖顶部边框 */
  display: inline-block;
  padding: 0 10px;
  font-size: 16px;
}

.checkboxes label {
  display: block;
  margin-bottom: 8px;
}

如果需要更精准的控制，也可以用CSS的::before/::after伪元素单独给容器的左、右、下边框，顶部边框分成两段放在

的左右，但上面的方法更高效，兼容性也更好。

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