CSS问题:如何将中的图片制作出来 由垂直接触的图像组成?

发布于 2024-07-20 14:25:47 字数 528 浏览 3 评论 0原文

在页面 Toggle Squares 中,我有一个由 > 在 JavaScript 生成的每个单元格中。 我应用了以下 CSS:

.game, .game td, .game tr, .game img
{ 
  border: none;
  border-spacing: 0;
  padding: 0;
  margin: 0;
}

为了删除所有间距。 然而,现在我在两个相邻行之间得到了一条细的背景间距线。 我怎样才能消除它?

该页面是有效的 XHTML + CSS。

谢谢你的帮助。

问候,

Shlomi 鱼

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,

Shlomi Fish.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

一桥轻雨一伞开 2024-07-27 14:25:47

使用..

border-collapse: collapse; 
border-width: 0; 

将 cellpadding="0" 和 cellspacing="0" 属性添加到表中,或尝试在 css 中

add cellpadding="0" and cellspacing="0" attributes to table, or try to use

border-collapse: collapse; 
border-width: 0; 

in css..

我不在是我 2024-07-27 14:25:47
.game td img {
 display: block;
}

图像有自己的空白

.game td img {
 display: block;
}

Images come with their own white space

黄昏下泛黄的笔记 2024-07-27 14:25:47

固定的:

.game, .game td, .game tr, .game img
{ 
  border: none;
  border-spacing: 0;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}

Fixed:

.game, .game td, .game tr, .game img
{ 
  border: none;
  border-spacing: 0;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}
小帐篷 2024-07-27 14:25:47

问题是:内联图像被视为字母,其中 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.

沧笙踏歌 2024-07-27 14:25:47

我能够使用以下代码获得您正在寻找的效果:

该代码描绘了四个彼此相邻的纯色 jpeg,形成一个正方形,中间没有空格:

<html>
<head>
    <style>
        td { margin 0px; padding: 0px;}
        table { border-collapse:collapse;}
    </style>
</head>
<body>
    <table>
        <thead />
        <tbody>
            <tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr>                   
            <tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr>
        </tbody>
    </table>
</body>

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:

<html>
<head>
    <style>
        td { margin 0px; padding: 0px;}
        table { border-collapse:collapse;}
    </style>
</head>
<body>
    <table>
        <thead />
        <tbody>
            <tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr>                   
            <tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr>
        </tbody>
    </table>
</body>

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文