为什么我的表格单元格似乎有填充，即使我已将其设置为不填充？
我创建了一个没有边距、填充或边框的 skinny CSS 类：
.skinny
{
margin:0 0 0 0;
padding:0 0 0 0;
border:0 0 0 0;
}
我将其应用到包含图像的行，该图像也应用了 skinny 类：
<td width="33%" align="center" class="skinny">
<table width="400px" height="180px" class="skinny">
<tr class="skinny">
<td class="skinny" width="60px" height="100px"><a class="skinny" href="/"><img class="skinny" width="60px" height="100px" id="snapshot" src="/images/snapshot.png"></a></td>
<td class="skinny" width="120px" height="100px"><a class="skinny" href="/"><h1 class="skinny">Product</h1></a></td>
</tr>
</table>
</td>
I我试图让图像尽可能接近下一个单元格中的
但无论我将 skinny 类应用到多少个元素，每个表格单元格周围似乎都有类似“填充”的东西，在图像和文本之间创建了一个空间。
我该如何删除它？
I created a skinny CSS class that has no margin, padding or border:
.skinny
{
margin:0 0 0 0;
padding:0 0 0 0;
border:0 0 0 0;
}
And I applied it to a row containing an image which also has the skinny class applied to it:
<td width="33%" align="center" class="skinny">
<table width="400px" height="180px" class="skinny">
<tr class="skinny">
<td class="skinny" width="60px" height="100px"><a class="skinny" href="/"><img class="skinny" width="60px" height="100px" id="snapshot" src="/images/snapshot.png"></a></td>
<td class="skinny" width="120px" height="100px"><a class="skinny" href="/"><h1 class="skinny">Product</h1></a></td>
</tr>
</table>
</td>
I'm trying to get the image to appear as close as possible to the <h1> text in the next cell so that they are pushed up against each other, left-to-right.
But no matter how many elements I apply the skinny class to, there seems to be something like a 'padding' around each of the table cells that creates a space between the image and the text.
How do I remove that?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
桌子本身也提供填充。
所以表定义需要是
the table itself also give padding.
so the table definition needs to be
可能不是填充
试试这个
It may not be padding
just try this
图像是内联元素，位于基线上，它们被视为没有下伸部的字母（即像 a、b 和 c，但不像 g、j 和 y）。
将图像设置为
display: block以避免这种情况（或使用vertical-align进行调整）更好，因为它看起来像你有一个 1x2 的桌子：don' t 使用表格进行布局
Images are inline elements and sit on the base line, they are treated just like a letter with no descender (i.e. like a, b and c but not g, j and y).
Set the image to
display: blockto avoid this (or twiddle withvertical-align)Better yet, since it looks like you have a 1x2 table: don't use tables for layout
我遇到了同样的问题，并用谷歌搜索了几个小时。问题在于设置
td元素的高度。如果内容高度为 60px，td 高度为 120px，则顶部和底部各有 30px 的填充。所以正确答案是：（
删除高度）
I had same issue, and googled for hours. Issue was with setting height on
tdelements. If content height is 60px, and td height is 120px, there will be 30px padding on top and bottom each.So the correct answer will be:
(removed height)
边距崩溃
迟到了，但这是因为您的 h1 标记很可能在顶部或底部有一些边距。边距一直折叠到 dom 中最上面的元素，直到找到 padding-top 或 padding-bottom 不等于 0 的元素（这会中断折叠）。这是一个非常令人恼火的功能。
当我最意想不到的时候，崩溃的边距总是会回来咬我，而且调试起来非常棘手。
Collapsing margins
Late to the party but it is because your h1 tag most likely has some margins top or bottom. Margins collapse all the way up through to there uppermost element in the dom until it finds an element with padding-top or padding-bottom that does not equal 0 (this interrupts the collapsing). It is a very infuriating feature.
Collapsing margins always come back to bite me when I least expect it and there very tricky to debug.
将其添加到您的
tr的 &td的Add this to your
tr's &td's对我来说，这是一个
的line-height和我放置的之间不匹配的问题在它内部，这又是由 tailwindtext-*类引起的。For me it was an issue with a mismatch between the
line-heightof the<td>and the<div>I had placed inside it which was in turn being caused by the tailwindtext-*classes./* 去除内边距和边距 */
/* Remove padding and margin */