FancyBox问题与图像和achors

Question

我希望FancyBox中的图像没有边距。但是JS中的设置选项不起作用。

$("[data-fancybox]").fancybox({
    margin: [0, 0]
    gutter: 0
});

我注意到这是因为封装图像的锚元素的一部分在这些图像之外。你可以在这里看到一个演示：

jsfiddle link

当您将鼠标悬停在靠近底部的两个图像之间时，您可以看到一个“指针”光标 我该怎么做才能解决这个问题？

Answer 1

不仅仅是javascript，而是造型：

内联元素（锚点）中有内嵌元素（图像），就像某些斜体文本中的粗体文本一样（更糟糕的是，因为你的图像有很多高度......）。

如果你在锚点附近画一个边框，你会看到它是多么糟糕。浏览器尝试将图像“放在线上”。图像有点不健康：

而且：在“内联模式”中，所有空格都很重要（所以你需要制作你的标签...><...以避免这种情况。让你的html非常难看.Inline-Block已经有点好了，但是还是空格：

（你可以在外包裹上设置font-size: 0，但那将是一个删除这些空间的丑陋黑客......）

更好的解决方案

满足于阻止＆amp;浮：

图像上的display:block可防止内部空白计数（删除，弄清楚）。不要忘记清除包装div。

Answer 2

您可以尝试将框包装在div中并在其上设置font-size: 0样式。这个link也很有帮助。

$("[data-fancybox]").fancybox({
  margin: [0, 0]
  gutter: 0
});

#fancy {
  font-size: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fancy">
<a href="http://placehold.it/500x500" data-fancybox data-caption="My caption">
	<img src="http://placehold.it/150x150" alt="" />
</a><a href="http://placehold.it/500x500" data-fancybox data-caption="My caption">
	<img src="http://placehold.it/150x150" alt="" />
</a><a href="http://placehold.it/500x500" data-fancybox data-caption="My caption">
	<img src="http://placehold.it/150x150" alt="" />
</a><a href="http://placehold.it/500x500" data-fancybox data-caption="My caption">
	<img src="http://placehold.it/150x150" alt="" />
</a>
</div>

Answer 3

你在哪里看到保证金，为什么认为你的链接的视觉呈现与fancyBox有任何联系？

如果您指的是链接之间的空格，那么最简单的方法是：

a {
  float: left;
}

a img {
  vertical-align: top;
}

https://jsfiddle.net/1u1dnjgq/3/

Answer 4

只需使用

a{
  display: inline-block;
}

我不推荐直接使用，而是使用类并将其添加到锚元素。