html - 跨度和边界底部之间的多余空间

Question

有时跨度和边框底部之间存在奇怪的空间。特别是在移动设备上查看时。你可以在这里看到截图：

代码

.heading {
  text-align: center;
  border-bottom: 2px solid #fb7a6d;
  text-transform: uppercase;
  margin: 18px 0;
  clear: both;
}

.heading span {
  display: inline-block;
  background-color: #fb7a6d;
  color: #fff;
  padding: 3px 16px;
}

@media only screen and (max-width: 479px) {
  .heading {
    padding: 2px 25px;
  }
}

<h2 class="heading"><span>Price and release date</span></h2>

标签： htmlcss

Answer 1

@media only screen and (max-width: 479px) {
  .heading {
    padding: 2px 25px 0px 25px;
    //padding: 0px 25px 0px 25px;
  }