时间戳

首页 > 解决方案 > 为什么文字之间有很大的差距？

html - 为什么文字之间有很大的差距？

问题描述

在此处输入图像描述

我不明白为什么Status:和之间有这么大的垂直空间CLOSED。此问题仅在较小的屏幕上发生（因为它们在桌面上并排）。

编码：

<div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-6 col-sm">
                <h1 class="status">Status:</h1>
            </div>
            <div class="col-lg-8 col-md-7 col-sm-6 text-sm-left">
                <span class="closed">closed</span>
            </div>
        </div>
  </div>

.closed {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 100px;
  color: #2eb82e;
  text-shadow: 2px 2px #29a329;
}
.status {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 100px;
  color: white;
}

   @media (min-width: 2561px) {
     .container {
         margin-top: 20vh;
     }
     .status {
       font-size: 120px;
     }
     .closed {
       font-size: 120px;
       margin-left: 80px;
     }
   }
/**
 * XL desktops
 * ---------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 2560px){
  .status {
    font-size: 90px;
  }
  .closed {
    font-size: 90px;
  }
  .container {
      margin-top: 18vh;
      margin-left: 20%
  }
}

/**
 * LG laptops
 * ---------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
  .closed {
    font-size: 80px;
  }
  .status {
    font-size: 80px;
  }
}


/**
 * MD Tablet
 * ---------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  .closed {
    font-size: 80px;
    line-height: 1;
  }
  .status {
    font-size: 50px;
  }
}

/**
 * SM biggerphone
 * ---------------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 767px) {
  .closed {
    font-size: 80px;
    line-height: 1;
  }
  .status {
    font-size: 60px;
  }
}

/**
 * XS Small phone
 * ---------------------------------------------------------------- */
@media (max-width: 575px){

 .status {
   font-size: 50px;
 }
 .closed {
   font-size: 55px;
   line-height: normal;
 }
 .container {
   margin-top: 5vh;
 }
}

任何帮助是极大的赞赏！

编辑：我认为填充来自其中一个col-lg-8 col-md-7 col-sm-6类。当我检查 div.closed和.status元素没有这个填充。

标签： htmlcssbootstrap-4

解决方案

“margin: 0”属性可以解决这个问题。这是因为 bootstrap 对标题本身有一个desault margin。

.closed {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 100px;
  color: #2eb82e;
  text-shadow: 2px 2px #29a329;
  margin: 0;
}
.status {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 100px;
  color: white;
  margin: 0;
}

@media (min-width: 2561px) {
     .container {
         margin-top: 20vh;
     }
     .status {
       font-size: 120px;
     }
     .closed {
       font-size: 120px;
       margin-left: 80px;
     }
   }
/**
 * XL desktops
 * ---------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 2560px){
  .status {
    font-size: 90px;
  }
  .closed {
    font-size: 90px;
  }
  .container {
      margin-top: 18vh;
      margin-left: 20%
  }
}

/**
 * LG laptops
 * ---------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
  .closed {
    font-size: 80px;
  }
  .status {
    font-size: 80px;
  }
}


/**
 * MD Tablet
 * ---------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  .closed {
    font-size: 80px;
    line-height: 1;
  }
  .status {
    font-size: 50px;
  }
}

/**
 * SM biggerphone
 * ---------------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 767px) {
  .closed {
    font-size: 80px;
    line-height: 1;
  }
  .status {
    font-size: 60px;
  }
}

/**
 * XS Small phone
 * ---------------------------------------------------------------- */
@media (max-width: 575px){

 .status {
   font-size: 50px;
 }
 .closed {
   font-size: 55px;
   line-height: normal;
 }
 .container {
   margin-top: 5vh;
 }
}
<div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-6 col-sm">
                <h1 class="status">Status:</h1>
            </div>
            <div class="col-lg-8 col-md-7 col-sm-6 text-sm-left">
                <span class="closed">closed</span>
            </div>
        </div>
  </div>

推荐阅读