Question

看看上面的JS小提琴。我可以摆脱一些鬼魂，我不明白他们为什么会在那里？

我试过保证金：0;但它不工作？

<help></help>

任何帮助？

汤姆

Answer 1

您有一些问题导致您遇到麻烦。

您的锚点是内联元素，因此尊重标记之间的空格（换行符和空格）。您可以在每个标记之间进行评论（请参阅https://css-tricks.com/fighting-the-space-between-inline-block-elements/），但这是一个额外的标记，而不是解决方案。

我建议您将锚点设置为显示为内联块，以便它们按照您期望的方式处理边距和填充，然后将它们向左浮动，以便它们彼此整齐地堆叠。

通过将图片设置为max-width:25%，您可以以1/4宽度绘制它们，但它们仍保留100％的宽度（类似于position:relative影响块的方式）导致锚标签以500px宽度绘制。

为了解决这个问题，我将max-width:25%样式从img声明移到了a声明。这让我看到500px宽的图像相互重叠，但后来我通过在max-width:100%声明中添加img样式来解决这个问题。

我无法告诉你为什么会这样，但是我从试图将图像对准其他块来学习，默认情况下，图像在它们的高度属性中保留~3.5px。要解决此问题，您可以将display:block添加到img样式中。这导致图像仅保留绘制图像的确切宽度和高度，并且因为它包裹在内联块元素中，它仍然可以很好地堆叠。

.content a {
    display:inline-block;
    margin:0;
    max-width:25%;
    float:left;
}
.content img {
    display:block;
    max-width:100%;
    margin: 0;
    padding: 0;
}

https://jsfiddle.net/2psu0gs4/5/

Answer 2

要摆脱水平不可见边距，请使用float。另一方面，垂直边距不是边距，它是未被图像填充的元素的空间（因为图像将尝试保持其纵横比），如果你想摆脱它，你可以拉伸图像填补空白。

以你的小提琴为基础，试试这个：

.content img {
    width:100%;
    height:100%;
}

.content a {
    width:25%;
    height: 100px;
    float: left;
}

http://jsfiddle.net/2psu0gs4/6/

Answer 3

html标记中div的空格和换行符负责显示它们之间的空格。您必须删除这些空格，或者只添加here之类的html评论。

顺便说一句

编辑 - 您的标记无效。 <li>项必须作为<ul>的直接子项使用 - 我相应地更新了我的小提琴。

我的html / css文件有鬼边距或填充？

3 个答案: