html - 我的html/css文件中有假边距或填充？

http://jsfiddle.net/2psu0gs4/

看看上面的JS小提琴。
有一些我无法摆脱的虚假边缘，我也不明白为什么会出现这些虚假边缘？

我已经尝试过Margin：0；但这不起作用吗？

<help></help>

有什么帮助吗？

汤姆

最佳答案

您遇到了一些麻烦。


您的锚点是行内元素，因此请注意标记之间的空格（换行符和空格）。您可以在每个标签之间进行注释（请参见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作为其height属性的一部分。要解决此问题，可以将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/

关于html - 我的html/css文件中有假边距或填充？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31592415/