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

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

对所有单元格使用一致的标记，或者调整p元素的样式，使它们不会打乱布局。

Answer 2

导致问题的原因是默认的浏览器边距和填充。你只需要移除它。

在您的CSS文件中，只需在顶部添加以下代码即可；你会没事的。

* {
margin: 0;
padding: 0;
}

希望这对你有帮助。