Чтобы сделать элементы HTML ближе друг к другу

Question

У меня есть эта длинная форма для пользователей с несколькими элементами HTML. Для этого я использовал Materialise framework. Вот складная ссылка .

Форма становится слишком длинной.

Как убрать пробел между элементами и сделать его уже, чтобы мне не приходилось прокручивать вниз?

Я не нашел его в настройках фреймворка.

Вот HTML-код для элементов:

<div class="container">

  <div class="row">
    <div class="input-field col s12">
      <i class="material-icons prefix">add</i>
      <input id="stat" type="text" class="validate">
      <label for="stat">Добавить новую статистику</label>
    </div>
  </div>

  <div class="row">
    <div class="input-field col s12">
      <i class="material-icons prefix">assignment</i>
      <input id="des" type="text" class="validate">
      <label for="des">Добавить описание статистики</label>
    </div>
  </div>

  <div class="row">
    <div class="input-field col s1">
      <i class="material-icons prefix">trending_down</i>
    </div>
    <div class="input-field col s8">
      <h6>
        Добавить минимальное значение
      </h6>
    </div>
    <div class="input-field col s3">
      <input id="des" type="text" class="validate">
    </div>
  </div>

  <div class="row">
    <div class="input-field col s1">
      <i class="material-icons prefix">trending_up</i>
    </div>
    <div class="input-field col s8">
      <h6>
        Добавить максимальное значение
      </h6>
    </div>
    <div class="input-field col s3">
      <input id="des" type="text" class="validate">
    </div>
  </div>

  <a class="waves-effect waves-light btn-small #039be5 light-blue darken-1" id="btn"><i class="material-icons right">send</i>Добавить</a>
  <p> </p>
  <ul class="collapsible">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>Добавить данные в статистики:</div>
      <div class="collapsible-body">
        <span>
      
   <div class="row">   
   <div class="input-field col s1">
   <p>
  <i class="material-icons prefix">wb_sunny</i>
  </p>
   </div>   
   <div class="input-field col s7">  
  <select class="icons browser-default" id="weeksSel2" onChange ="getWeekText2();">  
  <option value="" disabled selected>Выберите неделю</option>
  </select>
  </div> 
  </div>          
      
    </span>
      </div>
    </li>
  </ul>

</div>
<!-- end of container -->

Answer 1

Возможно, вы захотите удалить margin-bottom из .row.

<div class="row">

Добавьте еще один класс в ваш div с классом row, скажем custom-row

<div class="row custom-row">

и добавьте стиль:

.custom-row {
  margin-bottom: 0 !important; /*this will override margin-bottom:10px from '.row'
}

Это сохранитвсе стили из .row, но переопределяют margin-bottom

Надеюсь, это поможет!

Answer 2

Я не очень разбираюсь в materializecss, но я обнаружил ту же проблему, с которой кто-то сталкивается, посмотрите, это может вам помочь.

В соответствии с приведенной ниже ссылкой, вам необходимо объединить все элементы col в один row.

Интервал между строками с помощью Materialise CSS