html - 如何在 Javascript 填充之前停止空类占用空间

Question

我正在使用 Javascript 构建一个结帐计算器，并且我正在这样输入数据:

<p class="car-rent-class-info h6 pb-1"></p>
<p class="car-rent-pickupdropoff-info h6 pb-1"></p>
<p class="car-rent-coverage-info h6 pb-1"></p>
<p class="car-rent-age-info h6 pb-1"></p>
<p class="car-rent-dropfee-info h6 pb-1"></p>
<p class="car-rent-adddriver-info h6 pb-1"></p>
<p class="car-rent-roadside-info h6 pb-1"></p>
<p class="car-rent-afterhours-info h6 pb-1"></p>
<p class="car-rent-tax-info h6 pb-1">Tax Included</p>
<h2 class="car-rent-price-total h1 t600"></h2>

脚本看起来像这样:

carpricetotal = $( ".car-rent-price-total" );
carpricetotal.html("$"+generateBillMath(DaysBetween(start_date,end_date),dayprice, weeklyprice, monthlyprice, car_class, pickup_loc, dropoff_loc, coveragec));

唯一的问题是，除非所有的字段都被填满，否则可能会有一些非常丑陋的空白，例如这里是一个屏幕截图:

有什么好方法可以防止这种丑陋的垂直间距？

Answer 1

额外的间距可能是由 margin 引起的对于 <p> .

您可以使用 :empty CSS 伪选择器，用于在没有内容时删除边距。 More Info

.pb {
  padding-bottom: 1em;
}

.pb:empty,
p:empty {
  margin: 0 !important;
  padding: 0 !important;
}

<p></p>

<div class="pb"></div>

Hello