Изменение вертикального расстояния между рядами в форме html

Question

У меня есть форма html, разделенная на два столбца и несколько строк с комбинацией обычных и выбранных входов, а также тексты всплывающих подсказок для каждой записи. Вертикальный интервал между каждой строкой варьируется, как показано на изображении ниже. Почему это происходит и как это можно решить? Я попытался установить отступы и поля для входов на 0, но это не решило эту проблему. Это все равно происходит даже без текста всплывающей подсказки.

HTML Интервал между формами

JSFiddle: https://jsfiddle.net/8j3Lgz5d/4/

.row {
  overflow: hidden;
  padding: 10px;
}

.col {
  float: left;
  width: 50%;
  overflow: visible;
}

fieldset {
  border: 0;
}

.calculate1 {
  margin: auto;
  width: 50%;
}

select {
  text-align-last: center;
  background-color: #565656;
  border: none;
  border-radius: 8px;
  color: white;
  font-family: Geomanist;
  width: 75%;
  height: 40px;
  margin: 0;
  padding: 0 0;
}

input,
select,
option {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input {
  text-align: center;
  background-color: #565656;
  border: none;
  border-radius: 8px;
  color: white;
  font-family: Geomanist;
  width: 75%;
  height: 40px;
  margin: 0;
  padding: 0 0;
}

input:focus {
  outline: none;
  border: 0;
}

select:focus {
  outline: none;
  border: 0;
}

option:focus {
  outline: none;
  border: 0;
}

.submit {
  padding: 20px;
}

.submit input {
  background-color: #7c7c7c;
  width: 25%
}

.submit input:hover {
  outline: none;
  border-color: white;
  box-shadow: 0 0 10px white;
}

.tooltip {
  position: relative;
  display: inline-block;
  padding: 0;
  border: 0;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 5px;
  font-size: 80%;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
  overflow: visible;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  overflow: visible;
}

.tooltip2 {
  position: relative;
  display: inline-block;
  padding: 0;
  border: 0;
}

.tooltip2 .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 5px;
  font-size: 80%;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 105%;
  overflow: visible;
}

.tooltip2:hover .tooltiptext {
  visibility: visible;
  overflow: visible;
}

<div class='calculate1'>
  <form name='calc' action='.' method='post'>
    <fieldset>
      <div class='row'>
        <div class='col'>
          <p>
            <div class='tooltip'>
              x
              <span class='tooltiptext'>abcd.
                        </span>
            </div>
          </p>
          <select name='x'>
            <option> a </option>
            <option> b </option>
            <option> c </option>
            <option> d </option>
          </select>
        </div>
        <div class='col'>
          <p>
            <div class='tooltip2'>
              y
              <span class='tooltiptext'>abcdef.
                        </span>
            </div>
          </p>
          <select name='y'>
            <option>a</option>
            <option>b</option>
            <option>c</option>
            <option>d</option>
            <option>e</option>
            <option>f</option>
          </select>
        </div>
      </div>
      <div class='row'>
        <div class='col'>
          <p>
            <div class='tooltip'>
              z
              <span class='tooltiptext'>z.
                        </span>
            </div>
          </p>
          <p> <input type='text' name='z' required> </p>
        </div>
        <div class='col'>
          <p>
            <div class='tooltip2'>
              xx
              <span class='tooltiptext'>xx
                        </span>
            </div>
          </p>
          <p> <input type='text' name='xx' required></p>
        </div>
      </div>
      <div class='row'>
        <div class='col'>
          <p>
            <div class='tooltip'>
              yy
              <span class='tooltiptext'>yy
                        </span>
            </div>
          </p>
          <p> <input type='text' name='yy' required></p>
        </div>
        <div class='col'>
          <p>
            <div class='tooltip2'>
              zz
              <span class='tooltiptext'>abcdefghijk
                        </span>
            </div>
          </p>
          <select name='yy'>
            <option>a</option>
            <option>b</option>
            <option>c</option>
            <option>d</option>
            <option>e</option>
            <option>f</option>
            <option>g</option>
            <option>h</option>
            <option>i</option>
            <option>j</option>
            <option>k</option>
          </select>
        </div>
      </div>
      <div class='row'>
        <div class='col'>
          <p>
            <div class='tooltip'>
              xxx
              <span class='tooltiptext'>abcdefg.
                        </span>
            </div>
          </p>
          <select name='xxx'>
            <option>a</option>
            <option>b</option>
            <option>c</option>
            <option>d</option>
            <option>e</option>
            <option>f</option>
            <option>g</option>
          </select>
        </div>
        <div class='col'>
          <p>
            <div class='tooltip2'>
              yyy
              <span class='tooltiptext'>abc.
                    </div>
                    </p>
                <select name='yyy'>
                    <option>a</option>
                    <option>b</option>
                    <option>c</option>
                </select>
                </div>
            </div>
            <div class='row'>
                <div class='col'>
                    <p>
                    <div class='tooltip'>
                        zzz
                        <span class='tooltiptext'>abc.
                        </span>
            </div>
          </p>
          <select name='zzz'>
            <option>a</option>
            <option>b</option>
            <option>c</option>
          </select>
        </div>
        <div class='col'>
          <p>
            <div class='tooltip2'>
              xxxx
              <span class='tooltiptext'>
                          xxxxxxxx
                        </span>
            </div>
          </p>
          <select name='xxxx'>
            <option>a</option>
            <option>br</option>
            <option>c</option>
            <option>d</option>
            <option>e</option>
            <option>f</option>
            <option>g</option>
            <option>h</option>
            <option>i</option>
            <option>j</option>
            <option>k</option>
            <option>l</option>
            <option>m</option>
            <option>n</option>
          </select>
        </div>
      </div>
      <div class='row'>
        <div class='col'>
          <p>
            <div class='tooltip'>
              yyyy
              <span class='tooltiptext'>yyyy
                        </span>
            </div>
          </p>
          <p><input type='text' name='yyyy' required> </p>
        </div>
        <div class='col'>
          <p>
            <div class='tooltip2'>
              zzzz
              <span class='tooltiptext'>zzzz
                        </span>
            </div>
          </p>
          <select name='zzzz'>
            <option>no</option>
            <option>yes</option>
          </select>
        </div>
      </div>
      <div class='row'>
        <div class='col'>
          <p>
            <div class='tooltip'>
              xxxxx
              <span class='tooltiptext'>xxxxx
                        </span>
            </div>
          </p>
          <select name='xxxxxt'>
            <option>y</option>
            <option>n</option>
          </select>
        </div>
        <div class='col'>
          <p>
            <div class='tooltip2'>
              yyyyy
              <span class='tooltiptext'>yyyyy
                        </span>
            </div>
          </p>
          <select name='yyyyy'>
            <option>a</option>
            <option>b</option>
          </select>
        </div>
      </div>
      <div class='submit'>
        <p> <input type='submit'> </p>
      </div>
    </fieldset>
  </form>
</div>

Answer 1

То, что вызывает вашу проблему, - это поля и отступы браузера по умолчанию. Вам просто нужно удалить его.

В свой CSS файл просто добавьте этот код вверху, и все будет в порядке.

* {
  margin: 0;
  padding: 0;
}

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

Answer 2

В примере input элементы заключены в p элементы, select элементы - нет, что приводит к несогласованному количеству p элементов между строками. Поскольку стиль по умолчанию для элементов p включает нижнее и верхнее поля, они влияют на интервал.

Либо используйте согласованную разметку для всех ячеек, либо настройте стиль для p элементов, чтобы они не испортились ваш макет.