CSS问题:如何将
在页面 Toggle Squares 中,我有一个由 > 在 JavaScript 生成的每个单元格中。 我应用了以下 CSS:
.game, .game td, .game tr, .game img
{
border: none;
border-spacing: 0;
padding: 0;
margin: 0;
}
为了删除所有间距。 然而,现在我在两个相邻行之间得到了一条细的背景间距线。 我怎样才能消除它?
该页面是有效的 XHTML + CSS。
谢谢你的帮助。
问候,
In the page Toggle Squares , I have a table made out of an <img /> in every cell generated by JavaScript. I applied the following CSS:
.game, .game td, .game tr, .game img
{
border: none;
border-spacing: 0;
padding: 0;
margin: 0;
}
In order to remove all spacing. However, now I'm getting a thin background line of spacing between two adjacent rows. How can I eliminate it?
The page is valid XHTML + CSS.
Thanks for any help.
Regards,
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
使用..
将 cellpadding="0" 和 cellspacing="0" 属性添加到表中,或尝试在 css 中
add cellpadding="0" and cellspacing="0" attributes to table, or try to use
in css..
图像有自己的空白
Images come with their own white space
固定的:
Fixed:
问题是:内联图像被视为字母,其中 ascent = 图像高度,descent = 字体下降。 这意味着仅包含图像的表格单元格的高度大于图像高度。
解决这个问题的最简单方法是将整个表格的行高设置为零,从而抑制文本行的下降,或者为所有图像设置显示:块,从而将它们从内联格式化上下文移到块格式化上下文中。
The problem is: inline image is treated as a letter with ascent = height of the image and descent = descent of the font. That means that a table cell that contains only an image has the height that is bigger than the image height.
The simplest way to fix that is to set line-height to zero for the whole table thus suppressing the descent in the text lines or set display: block for all images thus moving them out of inline formatting context into block formatting context.
我能够使用以下代码获得您正在寻找的效果:
该代码描绘了四个彼此相邻的纯色 jpeg,形成一个正方形,中间没有空格:
I was able to get the effect you are looking for with the following code:
The code depicts four solid colored jpegs right next to each other forming a square with no space inbetween: