Advertisements
I have created a simple example https://jsfiddle.net/9usfctbp/ that contains the issue.
There is a code from fiddle:
<table>
<tr>
<td>
<a href="#">
Link
</a>
</td>
</tr>
</table>
a {
display: block;
font-size: 16px;
line-height: 16px;
}
Expected result: td has height 16px the same as a link.
Actual result: td has height 18px that is 2px more than a link height.
>Solution :
try removing the padding from the td elements :
/* if you only want to keep the same height */
td {
padding-top: 0;
padding-bottom: 0;
}
/* or remove the padding from all edges */
td {
padding: 0;
}