Checkbox causes incorrect height on parent element - css

Question

I am trying so solve a problem that causes me and my colleagues a splitting headache. Even though we've been provided a painkiller each we continue to be baffled by the way Google Chrome renders a checkbox in a container that has a font-size of 10pt.
The problem
Google Chrome seems to render some extra space around a checkbox element that I cannot seem to get rid of. The checkbox and its parent element must be 15 pixels tall. Setting the font-size of the parent element to 10pt causes that parent element to be 16 pixels in height.
An example
Take a look at the snippet below.
I have yet to find out (or understand) what causes the checkbox element to render as 15 pixels tall but effectively making its parent element 16 pixels tall.
td,
th
{
padding: 0;
font-size: 10pt;
}
input[type=checkbox]
{
height: 15px;
border: none;
padding: 0;
margin: 0;
}
<table width="100%" class="data">
<tr>
<th>Label 1</th>
<td>Value 1</td>
</tr>
<tr>
<th>Checkbox 2</th>
<td><input type="checkbox" disabled="disabled" /></td>
</tr>
<tr>
<th>Label 3</th>
<td><input type="checkbox" disabled="disabled" checked="checked" /></td>
</tr>
</table>
Exchanging the table for a div, a p or any other container also results in an incorrect height for that container.
Possible solution?
Setting the checkbox height to 14px makes the parent row 15 pixels tall. But then the checkbox itself does not meet the designer's requirements and thus this solution will not be accepted. Any workarounds?

Answer 1

input has default font property:
font: 13.3333px Arial
If you ensure that both the input and text in adjacent cells are the same font it should remove differences in line-height (I think).
Also, add display: block to input
td,
th {
padding: 0;
font-size: 10pt;
font-family: sans-serif;
}
input[type=checkbox] {
height: 15px;
border: none;
padding: 0;
margin: 0;
display: block;
}
<table width="100%" class="data">
<tr>
<th>Label 1</th>
<td>Value 1</td>
</tr>
<tr>
<th>Checkbox 2</th>
<td><input type="checkbox" disabled="disabled" /></td>
</tr>
<tr>
<th>Label 3</th>
<td><input type="checkbox" disabled="disabled" checked="checked" /></td>
</tr>
</table>

Answer 2

Another solution:
First, add display: block; to the input.
You can change the parent behaviour with the box-sizing property.
td {
box-sizing: content-box;
}
should fix your problem.
td,
th {
padding: 0;
font-size: 10pt;
}
tr {
box-sizing: content-box;
}
input[type=checkbox]{
display: block;
height: 15px;
border: none;
padding: 0;
margin: 0;
}
<table width="100%" class="data">
<tr>
<th>Label 1</th>
<td>Value 1</td>
</tr>
<tr>
<th>Checkbox 2</th>
<td><input type="checkbox" disabled="disabled" /></td>
</tr>
<tr>
<th>Label 3</th>
<td><input type="checkbox" disabled="disabled" checked="checked" /></td>
</tr>
</table>

Answer 3

I also had this problem in 2020, on Chrome and Firefox, and none of the solutions here worked. This is what worked for me
input[type=checkbox] {
height: 21px;
vertical-align: top;
position:relative;
top:-5px;
}
.checkboxcontainer{
max-height: 16px;
}
In my case we had a structure
<div>
<div data-x="lots of these" />
<div data-x="lots of these" />
<div data-x="lots of these" />
<div>
<div class="checkboxcontainer">
<input type="checkbox" ...>
And the outer div was being given a huge top margin. Deleting the checkbox in f12 confirms that the checkbox was the culprit, and the css provided seemed to work ok