英文:
How to make td (table cell) height to be the same as an < a> (link element) height?
问题
我创建了一个简单的示例https://jsfiddle.net/9usfctbp/，其中包含了这个问题。
这里是来自示例的代码：
<table>
<tr>
<td>
<a href="#">
链接
</a>
</td>
</tr>
</table>
a {
display: block;
font-size: 16px;
line-height: 16px;
}
期望结果：td的高度为16px，与链接的高度相同。
实际结果：td的高度为18px，比链接的高度多2px。
英文:
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.
答案1
得分: 2
尝试去掉 <td> 元素的填充：
/* 如果你只想保持相同的高度 */
td {
padding-top: 0;
padding-bottom: 0;
}
/* 或者从所有边缘移除填充 */
td {
padding: 0;
}
英文:
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;
}
答案2
得分: 0
将margin、padding、border和td元素的属性都设为0，并将其line-height属性设置为与a元素的font-size属性相同的值。
table {
border-collapse: collapse;
}
td {
padding: 0;
margin: 0;
border: none;
line-height: 16px;
}
a {
display: block;
font-size: 16px;
line-height: 16px;
}
<table>
<tr>
<td>
<a href="#">
Link
</a>
</td>
</tr>
</table>
英文:
set margin,padding, border, td element to 0 and set its line-height property to same value of font-size of the a element
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
table {
border-collapse: collapse;
}
td {
padding: 0;
margin: 0;
border: none;
line-height: 16px;
}
a {
display: block;
font-size: 16px;
line-height: 16px;
}
<!-- language: lang-html -->
<table>
<tr>
<td>
<a href="#">
Link
</a>
</td>
</tr>
</table>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论