Html 无法获取块之间的空间

我正在编写一个代码来创建6个水平块，其中包含空格b/w块。但是，所有的区块都是相互重合的，中间没有空格

index.html

<div class="a">
        <div className="b">
          <p>Principle</p>
          <p>Amount Spend</p>
          <p>Interest</p>
        </div>
        <div className="c">
          <p>Current Price</p>
          <p>percentage</p>
          <p>Simple Interest</p>
        </div>
        <div className="d">
          <p>Unitary rate</p>
          <p>percentage</p>
          <p>Invested Amount</p>
        </div>
        <div className="e">
          <p>Unitary rate</p>
          <p>percentage</p>
          <p>Invested Amount</p>
        </div>
        <div className="f">
          <p>Unitary rate</p>
          <p>Unitary rate</p>
          <p>Invested Amount</p>
        </div>
        <div className="g">
          <p>Market Vaue</p>
          <p>percent of profit value</p>
          <p>Unitary rate</p>
        </div>
      </div>

---

您可以看到，在图像截图中，块中没有空格。我希望每个街区之间的间距相等。我只是一个初学者，所以请建议我如何修改此代码。

我建议使用

或换行符。另外，我不使用图表来填充和边缘，我实际上只是玩弄一点。我建议你也这样做，因为这可以帮助你在更亲密的层面上理解边缘和填充的基本原理。

我不太确定你想要达到什么样的空间。 要获得块之间的间距，请使用边距。我建议对每个块使用相同的类，以避免冗余

index.html

<div class="a">
        <div className="b">
          <p>Principle</p>
          <p>Amount Spend</p>
          <p>Interest</p>
        </div>
        <div className="c">
          <p>Current Price</p>
          <p>percentage</p>
          <p>Simple Interest</p>
        </div>
        <div className="d">
          <p>Unitary rate</p>
          <p>percentage</p>
          <p>Invested Amount</p>
        </div>
        <div className="e">
          <p>Unitary rate</p>
          <p>percentage</p>
          <p>Invested Amount</p>
        </div>
        <div className="f">
          <p>Unitary rate</p>
          <p>Unitary rate</p>
          <p>Invested Amount</p>
        </div>
        <div className="g">
          <p>Market Vaue</p>
          <p>percent of profit value</p>
          <p>Unitary rate</p>
        </div>
      </div>

原则

支出金额

兴趣

现行价格

百分比

单利

统一汇率

百分比

投资额

统一汇率

百分比

投资额

统一汇率

统一汇率

投资额

市场价值

利润价值百分比

统一汇率

index.css

.a
{
  display: flex;
  padding-top: 10px;
}

.b
{
  width: 15%;
  background-color:#D3D3D3;

}

.c
{
  width: 15%;
  background-color:#D3D3D3;

}
.d
{
  width: 15%;
  background-color:#D3D3D3;



}
.e
{
  width: 15%;
  background-color:#D3D3D3;



}
.f
{
  width: 15%;
  background-color:#D3D3D3;
}

.g
{
  width: 15%;
  background-color:#D3D3D3;


}

p{
  padding-left: 18px;
  line-height: 20%;
  padding-top: 8px;
  padding-bottom: 8px;
}

.a{
显示器：flex；
填充顶部：10px；
}
.街区{
宽度：15%；
背景色：#D3；
利润率：15px；
}
p{
//如果要将文本居中，请使用此选项
文本对齐：居中；
}

---

这应该为具有

块
类的每个元素提供间距。
只需使用
justify content:space-between