html - 我的 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/），但这是很多额外的标记，更像是一种技巧而不是解决方案.

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

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

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

3. 我无法告诉你为什么会这样，但我从尝试将图像与其他块对接中学到了，默认情况下，图像在其下方保留约 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 之间的空格和换行符负责显示它们之间的空间。您必须删除这些空格或简单地添加<!-- spaces and linebreaks -->像这里这样的 html 注释。

顺便编辑一下 - 您的标记无效。这些<li>项目必须用作的直接孩子<ul>- 我相应地更新了我的小提琴。