我的 html/css 文档有幽灵边距或填充？

Question

http://jsfiddle.net/2psu0gs4/

看看上面的 JS fiddle。 有一些我无法摆脱的幽灵边缘，我不明白它们为什么会在那里？？

我试过 Margin: 0;但它不起作用？

<help></help>

有什么帮助吗？

汤姆

Answer 1

您有一些问题给您带来麻烦。

1. 您的锚点是内联元素，因此尊重标签之间的空白（换行符和空格）。您可以在每个标签之间发表评论（请参阅https://css-tricks.com/fighting-the-space-between-inline-block-elements/），但这是很多额外的标记，与其说是解决方案，不如说是一种技巧。

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

1. 通过将图像设置为max-width:25%，您以 1/4 宽度绘制它们，但它们仍保留 100% 的宽度（有点像 position:relative 影响块的方式），这会导致锚标记绘制宽度为 500 像素。

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

1. 我无法告诉你为什么会这样，但我从尝试将图像与其他块对接中学到了，默认情况下，图像在其下方保留约 3-5px 作为其高度属性的一部分。为了解决这个问题，您可以将display:block 添加到您的img 样式中。这会导致图像只保留绘制图像的确切宽度和高度，并且因为它被包裹在一个 inline-block 元素中，它仍然可以很好地堆叠。

.

.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

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

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

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

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

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

Answer 3

html 标记中 div 之间的空格和换行符负责显示它们之间的空格。您必须删除这些空格或简单地添加 html cmets <!-- spaces and linebreaks --> 如here。

edit 顺便说一句 - 您的标记无效。 <li> 项目必须用作 <ul> 的直接子项 - 我相应地更新了我的小提琴。