如何用HTML和CSS在两个区块间创建分隔直线？

这里给你两种简单可靠的实现方式，解决你之前用grid和border没达到预期的问题：

方案1：利用border配合间距控制 #

这种方式最直接，只要调整好边距避免分隔线重叠：

<div class="container">
  <div class="top-section">顶部区块内容</div>
  <div class="bottom-section">底部区块内容</div>
</div>

.container {
  width: 100%;
  max-width: 800px; /* 可选，限制容器宽度 */
  margin: 0 auto;
}

.top-section {
  padding: 20px;
  border-bottom: 1px solid #ccc; /* 顶部区块加下边框作为分隔线 */
}

.bottom-section {
  padding: 20px;
  /* 不需要加边框，避免重复 */
}

如果之前用border没效果，可能是两个区块的border叠加或者没清除默认边距，这个方案通过只给顶部区块加下边框，同时用padding保证内容和分隔线有间距，不会挤在一起。

方案2：单独添加分隔线元素 #

如果需要更灵活控制分隔线的样式（比如粗细、颜色、长度），可以单独加一个分隔线div：

<div class="container">
  <div class="top-section">顶部区块内容</div>
  <div class="divider"></div>
  <div class="bottom-section">底部区块内容</div>
</div>

.container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.top-section, .bottom-section {
  padding: 20px;
}

.divider {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  /* 可选：调整左右边距让分隔线比区块窄一点 */
  margin: 0 10px;
}

这种方式可以自由调整分隔线的margin，实现和区块边缘有空隙的效果，适配多数期望样式。

排查之前grid方案失效的原因 #

如果之前用grid没做出分隔线，大概率是没正确设置grid的边框或间隙样式，比如可以这样用grid实现：

.container {
  display: grid;
  grid-template-rows: auto auto;
  gap: 0; /* 去掉间隙 */
}

.top-section {
  border-bottom: 1px solid #ccc;
  padding: 20px;
}

.bottom-section {
  padding: 20px;
}

核心是确保grid容器没有额外的gap，否则分隔线会和区块之间有空隙，影响视觉效果。

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