【发布时间】：2023-01-03 12:39:36
【问题描述】：
我所有的范围 <input> 元素似乎都有额外的垂直空间 在它们之后，防止它们垂直紧密地堆积在一起， 并防止放置相关元素（如文本标签） 垂直紧跟在他们后面。
我如何摆脱这个不需要的额外垂直空间？
这是一个演示问题的html+css sn-p；它试图删除所有元素之间的所有空间（除了用于调试的一些 1px 彩色边框）：
<!DOCTYPE html>
<html>
<head>
<style>
/*
pack everything as tightly as possible,
except some 1px colored borders for debugging
*/
* {
margin:0;
border:10px solid black; /* make anything not covered by rules below look terrible */
padding:0;
}
html { border:1px solid red; }
body { border:1px solid orange; }
hr { border:1px solid green; }
table {
border:1px solid cyan;
border-spacing:0;
}
td { border: 1px solid blue; }
div { border:1px solid magenta; }
input {border:1px solid red; } /* the 1px matters but the red doesn't show?? */
</style>
</head>
<body>
Three range <input>s separated by <br> (unwanted extra vertical space):
<br>
<input type="range">
<br>
<input type="range">
<br>
<input type="range">
<hr>
Table with three range <input>s in same cell, separated by <br> (unwanted extra vertical space):
<table>
<tr>
<td>
<input type="range">
<br>
<input type="range">
<br>
<input type="range">
</table>
<hr>
Table with three range <input>s in different cells (unwanted extra vertical space):
<table>
<tr><td><input type="range">
<tr><td><input type="range">
<tr><td><input type="range">
</table>
<hr>
Three <div>s, each with a range <input> inside (unwanted extra vertical space):
<div><input type="range"></div>
<div><input type="range"></div>
<div><input type="range"></div>
<hr>
Three range <input>s separated by <div>s with negative margins (hack to show desired spacing):
<br>
<input type="range">
<div style="margin-top:-5px; margin-bottom:-1px;"></div>
<input type="range">
<div style="margin-top:-5px; margin-bottom:-1px;"></div>
<input type="range">
<hr>
<input> elements of type other than range, to show that the border color (red) works as expected on most of them:
<br>
button:<input type="button" value="button value"></input>
checkbox:<input type="checkbox"></input>
color:<input type="color"></input>
date:<input type="date"></input>
datetime-local:<input type="datetime-local"></input>
email:<input type="email" value="email value"></input>
file:<input type="file"></input>
hidden:<input type="hidden"></input>
image:<input type="image"></input>
month:<input type="month"></input>
number:<input type="number" value="123"></input>
password:<input type="password" value="abc"></input>
radio:<input type="radio"></input>
range:<input type="range"></input>
reset:<input type="reset"></input>
search:<input type="search" value="search value"></input>
submit:<input type="submit"></input>
tel:<input type="tel" value="tel value"></input>
text:<input type="text" value="text value"></input>
time:<input type="time"></input>
url:<input type="url" value="url value"></input>
week:<input type="week"></input>
</body>
</html>这是 Linux 上 chrome 108.0.5359 中上述 sn-p 的输出；请注意范围 <input> 似乎是 垂直间距比必要的更宽一点：
检查元素，我观察到：
-
这个 <input> 元素的范围是 18 像素高（如果我关闭 1px 调试边框则为 16）；这看起来很合理：
-
包含范围 <input> 的 <td> 是 24 像素高（如果我关闭 1px 调试边框，则为 22），因为它在底部包含 6 像素的神秘空间：
更一般地说，在每个范围 <input> 元素之后似乎有 6 个像素的神秘额外垂直空间。 这个神秘的额外垂直空间从何而来？ 有没有办法摆脱它，而无需硬编码假设它在那里以及它有多大？
另外，不太重要的是，我很好奇为什么边框颜色（红色）似乎对上述 sn-p 中的范围 <input> 元素没有任何影响（边框宽度得到尊重，但边框颜色是不是）。
【问题讨论】：
标签： css