如何为CSS多列布局的每一列上下添加间距？

我用CSS多列布局（Multicolumn）适配宽屏/超宽屏设备，给文本加了彩色背景框，整体效果不错，但有个问题：

如截图所示，文本溢出到下一列时会紧贴背景框边缘，因背景色差异，这个问题格外显眼。常规padding无法解决——它只影响第一列顶部和最后一列底部。我想找到一种方法，自动给每列的开头和结尾添加间距，同时不破坏响应式布局。试过padding、margin都没用，也不想给每个段落加break-inside: avoid，那样得把段落拆得很短。

精简后的代码如下：

CSS代码 #

.writing .grid-item-dark,.writing .grid-item {  break-inside: auto;}
.writing .grid-item-dark p, .writing .grid-item p {
  font-family: "EB Garamont", serif;
  color: #e8fcfc;
  font-size: 19px;
  padding: 0 15px;  
  margin: 15px 0;
  line-height: 140%;
  letter-spacing: 1px;
}
.writing .grid-item-dark h1,.writing .grid-item-dark h2,.writing .grid-item-dark h3,.writing .grid-item h1,.writing .grid-item h2,.writing .grid-item h3 {
  font-family: "EB Garamond", serif;
  color: #e8fcfc;
  font-weight: 600;
  text-transform: none;
  break-after: avoid;
}
.writing .grid-item-dark h1,.writing .grid-item h1 {
  font-size: 40px;
  padding: 30px 30px;
}
.writing .grid-item-dark h2,.writing .grid-item h2 {
  font-size: 28px;
  padding: 20px 15px; 
}
.writing .grid-item-dark h3,.writing .grid-item h3 {
  font-size: 25px;   
  padding: 20px 15px 10px 15px; 
}
.grid-items {
  padding: 3%;   
  column-count: 1;
  column-gap: 0;
}
.grid-item-dark {
  background-color: #1c1c1ca3;
  margin-top: 1.5rem;
}
/* 响应式示例 */
@media (min-width: 2400px) {
  .grid-items {
      column-count: 3;
      column-gap: 4%;
  }
  .grid-items > div {
      padding: 20px;
  }
}

HTML代码 #

<main class="content">
    <div class="grid-items">
        <div class="grid-item">
            <div class="main_heading" id="main_heading">
                <h1>Text</h1>
            </div>
        </div>
        <div class="writing">
            <div class="grid-item-dark">
                <h1>Chapter 1</h1>
                <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
            </div>
        </div>
    </div>
</main>

核心是利用box-decoration-break: clone属性，它能让元素的背景、内边距等装饰在列中断时，在每个断片上完整渲染，而非仅作用于整体首尾。

修改步骤 #

1. 给带背景的容器添加上下内边距和box-decoration-break属性：

.grid-item-dark {
  background-color: #1c1c1ca3;
  margin-top: 1.5rem;
  padding: 15px 0; /* 给每列上下增加内边距 */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* 兼容webkit内核浏览器 */
}

2. 调整段落的margin，避免和新增padding重复造成间距过大：

.writing .grid-item-dark p, .writing .grid-item p {
  /* 保留原样式，仅修改margin */
  margin: 0 0 15px 0; /* 去掉顶部margin，只保留底部间距 */
}

原理说明 #

box-decoration-break: clone会将元素的背景、内边距等装饰复制到每个列断片上，因此每一列的上下都会有预设的padding，彻底解决文本紧贴边缘的问题。该属性适配绝大多数现代浏览器，添加webkit前缀可兼容Safari等产品，且完全不影响原有响应式布局逻辑。

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