元素之间有填充，但两侧没有填充-PHP中文网问答

我正在创建一张带有标题的卡片，下面有 2 列中的其他卡片。问题是我想要元素之间的填充，而不是它们周围的填充，至少不在两侧，因为这使得标题与下面的框不一致。这是我想要的：

我尝试为每张绿卡提供不同的填充，因此左上角的填充为 0 1em 1em 0，右上角的填充为 0 0 1em 1em 等等。如果我可以有一个通用的解决方案，包含任何给定数量的卡片、列、行，而不是像这样的“硬编码”填充，那么它会更干净。这可能吗？

一种解决方案是填充标题，但这感觉像是一个丑陋的解决方案。

顶部和底部填充可以存在，如果这样更容易的话，我只是不能把它放在左边或右边。

相关代码：

.content-card {
  width: 100%;
  padding: 2em 2em 2em;
  background: black;
}

.service-card {
  max-width: 100%;
  padding: 1em 1em 1em;
  background: grey;
  border-radius: 0.25em;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.column-2x2 {
  display: flex;
  flex-direction: column;
  flex-basis: 45%;
  padding: 1em 1em 1em;
}


  Services.
  

  
    
      
        Service 1.
      
    
    
      
        Service 2.
      
    
    
      
        Service 3.
      
    
    
      
        Service 4.

.red-card{ height: 350px; width: 250px; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; border: 3px solid red } .green-card{ height: 150px; width: 100px; border: 3px solid green }