JSFiddle - React, Tailwind, and code Playground
HTML
<!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...
CSS
td, div{
line-height: 0;
}