时间戳

首页 > 解决方案 > 无法获得块之间的空间

html - 无法获得块之间的空间

问题描述

我正在编写一个代码来创建 6 个水平块，这些块带有空格。但是所有的块都相互重合，中间没有空格

索引.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>

索引.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;
}

在此处输入图像描述

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

标签： htmlcssbootstrap-4

解决方案

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

索引.html

<div class="a">
  <div class="block">
    <p>Principle</p>
    <p>Amount Spend</p>
    <p>Interest</p>
  </div>
  <div class="block">
    <p>Current Price</p>
    <p>percentage</p>
    <p>Simple Interest</p>
  </div>
  <div class="block">
    <p>Unitary rate</p>
    <p>percentage</p>
    <p>Invested Amount</p>
  </div>
  <div class="block">
    <p>Unitary rate</p>
    <p>percentage</p>
    <p>Invested Amount</p>
  </div>
  <div class="block">
    <p>Unitary rate</p>
    <p>Unitary rate</p>
    <p>Invested Amount</p>
  </div>
  <div class="block">
    <p>Market Vaue</p>
    <p>percent of profit value</p>
    <p>Unitary rate</p>
  </div>
</div>

索引.css

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

.block {
  width: 15%;
  background-color:#D3D3D3;
  margin: 15px;
}

p {
  // If you want to center your text, use this
  text-align: center;
}

block这应该为您提供具有该类的每个元素的间距。

推荐阅读