Html 图像彼此不齐平

我在一个页面上有一些图片，我想把它们变成我已经完成的项目的链接，但它们似乎不想彼此对齐

.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>

---

我把所有的边距和填充都去掉了，所以我不知道为什么它有间隔…

添加

display:block

。它们默认为

display:inline

，导致它们周围有额外的一些像素

如果注释掉

display:block

，您可以在顶部图像的底部看到额外的px（即使a标记上有

display:block

）

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

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

---

这是由于围绕空白的内联块元素的性质造成的。有关说明和一些解决方案，请参见以下内容

---

您能在JSFIDLE中重新创建问题吗？JSFIDLE会有所帮助。综上所述，可能是标记中的空白与内联元素结合在一起。如果是这样的话，简单修复-将链接阻塞，并使其浮动。标记中的换行符在html中计为空白