以html形式改变行之间的垂直间距

Question

我有一个 html 表单，分为两列和几行，结合了常规输入和选择输入，以及每个条目的工具提示文本。每行之间的垂直间距各不相同，如下图所示。为什么会发生这种情况以及如何解决？我尝试将输入的填充和边距设置为 0，但它没有解决它。即使没有工具提示文本，这仍然会发生。

HTML Form Spacing

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

在示例中，input 元素被包裹在 p 元素中，select 元素未被包裹，这导致行之间的 p 元素数量不一致。由于p 元素的默认样式包括下边距和上边距，因此它们会影响间距。

要么对所有单元格使用一致的标记，要么调整 p 元素的样式，以免它们弄乱您的布局。

Answer 2

导致您出现问题的原因是默认浏览器边距和填充。您只需将其删除即可。

在您的 CSS 文件中，只需在顶部添加此代码即可。

* {
  margin: 0;
  padding: 0;
}

希望对你有所帮助。