1

我是 CSS 新手，想知道您能否给我一点帮助。我一直在学习一些教程，并且正在玩一些弹出图像。

我一生都无法弄清楚缩略图之间的 4px 间隙来自哪里。

我想在彩色方块之间留出 12px 的边距来隔开我的小画廊，但是当我添加自己的边距时，它的移动非常奇怪。我只是以错误的方式做事吗？

我所有的代码都在这里http://jsfiddle.net/p45JH/5/

这是我使用的 CSS 代码：-

.thumbnail {
    position: relative;
    z-index: 0;
}
.thumbnail:hover {
    background-color: transparent;
    z-index: 50;
}
.thumbnail span {

    position: absolute;
    background-color: white;
    font-family:Arial, Helvetica, sans-serif;
    text-align:center;
    padding: 5px;
    left: -1000px;
    border: 1px solid #CCC;
    visibility: hidden;
    color: black;
    text-decoration: none;
}
.thumbnail span img {

    border-width: 0;
    padding: 2px;
    vertical-align:bottom;
}
.thumbnail:hover span {

    visibility: visible;
    bottom: 35px;
    left: 35px;

}

我敢肯定这真的很简单，只是我有限的知识阻止了我弄清楚。

谢谢你的尽心帮助。

4

2 回答 2

0

尝试使用 div 而不是链接，看看我是否删除了 Html 代码中链接之间的空格：http: //jsfiddle.net/soyuka/p45JH/6/

没有空格：（没有填充/边距）

<a href=""> </a><a href=""> </a>

空格：（做一个正常的间隙）

<a href=""> </a>
<a href=""> </a>
于 2013-02-08T15:36:34.290 回答
0

是空格。内联（和内联-*）元素之间的空格被尊重。您可以将它们注释掉：

<a class="thumbnail">...</a><!--
--><a class="thumbnail">...</a>

或使用此处找到的其他技术之一：http: //css-tricks.com/fighting-the-space-between-inline-block-elements/

于 2013-02-08T16:10:28.340 回答