在HTML / CSS中填充额外空间

Question

如何填充圆圈空间？我想知道如何用白色背景颜色填充蓝色区域的其余部分。

我尝试增加填充，但每次增加填充时，这会使价格越来越低，向左移动一点。

我的HTML看起来像这样..

section {
  background-color: white;
}

#repair-tagline h1 {
  background-color: white;
  font-family: 'Open Sans Condensed', sans-serif;
  letter-spacing: 0.2rem;
  font-size: 3rem;
  text-align: center;
  padding: 40px 0 40px 0;
}

.repair-option {
  background-color: rgb(0, 0, 77);
  width: 80%;
  padding: 50px 50px 50px 50px;
  margin: 0px auto 50px auto;
}

.repair-type,
.repair-price {
  display: inline-block;
  color: white;
}

.repair-type {
  font-size: 2rem;
}

.repair-price {
  float: right;
  background-color: white;
  border: 1px solid black;
  color: black;
  font-size: 2rem;
}

<section>
  <div class="repair">
    <div id="repair-tagline">
      <h1>Choose Your Vacuum Cleaner Repair Option:</h1>
    </div>
    <div class="repair-option">
      <div class="repair-type">
        <h1>Belt Repair</h1>
      </div>
      <div class="repair-price">
        <h1>$10.00</h1>
      </div>
    </div>
    <div class="repair-option">
      <div class="repair-type">
        <h1>Brush-Roll Repair</h1>
      </div>
      <div class="repair-price">
        <h1>$20.00</h1>
      </div>
    </div>
  </div>
</section>

Answer 1

从repair-option类中删除填充，并将单个填充添加到2个子div（repair-type和repair-price）。这样，每个都有单独的填充，这意味着背景颜色对应于div。

.repair-price的填充可能看起来很奇怪，但我只是这样做，因为它没有排队。您可以根据需要更改所有填充。

section {
  background-color: white;
}

#repair-tagline h1 {
  background-color: white;
  font-family: 'Open Sans Condensed', sans-serif;
  letter-spacing: 0.2rem;
  font-size: 3rem;
  text-align: center;
  padding: 40px 0 40px 0;
}

.repair-option {
  background-color: rgb(0, 0, 77);
  width: 80%;
  padding: 0px;
  margin: 0px auto 50px auto;
}

.repair-type,
.repair-price {
  display: inline-block;
  color: white;
}

.repair-type {
  font-size: 2rem;
  padding: 10px;
}

.repair-price {
  float: right;
  background-color: white;
  border: 1px solid black;
  color: black;
  font-size: 2rem;
  padding: 10px 0px 8px 0px;
}

<section>
  <div class="repair">
    <div id="repair-tagline">
      <h1>Choose Your Vacuum Cleaner Repair Option:</h1>
    </div>
    <div class="repair-option">
      <div class="repair-type">
        <h1>Belt Repair</h1>
      </div>
      <div class="repair-price">
        <h1>$10.00</h1>
      </div>
    </div>
    <div class="repair-option">
      <div class="repair-type">
        <h1>Brush-Roll Repair</h1>
      </div>
      <div class="repair-price">
        <h1>$20.00</h1>
      </div>
    </div>
  </div>
</section>