почему между текстом большой разрыв?

Question

Я не понимаю, почему между 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 не имеют этого отступа.

Answer 1

@media (max-width: 575px){
 .status {
   font-size: 50px;
   line-height: .8; 
 }
 .closed {
   font-size: 55px;
   line-height: .8;
 }
 .container {
   margin-top: 5vh;
 }
}

Как я понимаю, у вас возникла проблема при использовании текста большого размера. так что вы можете играть с высотой строки. выше вы можете увидеть пример. https://jsfiddle.net/csscoder/xmgskj0w/6/

Answer 2

Свойство «margin: 0» может решить проблему. это связано с тем, что bootstrap имеет запас для заголовков.

.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>

Answer 3

Вы имеете в виду, что вертикальное расстояние между двумя текстами должно быть меньше? Зеленое поле вокруг Status: означает, что для этого элемента есть отступы, если вы добавите padding-bottom: 0 Два текста будут ближе. Также H1 по умолчанию имеет нижнюю границу, поэтому, если вы зададите ему margin-bottom: 0, это также поможет уменьшить пространство.