Question

我在页面上有一些图像，我想将这些图像变成我已经完成的项目的链接，但是他们似乎不希望彼此齐平。

.projectimage {
    transition: 2s;
    background-color:#FFF;
    margin:0px;
    padding:0px;
    width:25%;
}

.projectimage:hover {
    -webkit-filter: blur(4px) contrast(1.5) grayscale(0.4) sepia(0.2);
}

这是HTML。

<a href="#">
<img class="projectimage" src="../images/projects/texmex.png"  width="25%"  /></a>

我拿走了所有的边距并填充了所以我不知道为什么它有间距......

Answer 1

将display: block添加到您的图片中。它们默认为display: inline，导致它们周围有额外的几个px。

如果您注释掉display: block，则可以在顶部图片的底部看到额外的px（即使a标签上有display: block）。

<强> DEMO

a {
    width: 40%;
    float: left;
}

img {
    display: block;
    width: 100%;
}

Answer 2

这是由于围绕空格的内联块元素的性质。请参阅followinjg以获得解释和一些解决方案。

http://davidwalsh.name/remove-whitespace-inline-block http://css-tricks.com/fighting-the-space-between-inline-block-elements/

图像不相互冲洗

2 个答案: