html - 填充 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>