使用HTML添加相邻图像时删除垂直空间

我对html和css编码非常陌生，最近我用wordpress创建了自己的网站

在wordpress的其中一个页面中，我想添加相邻的图像，并用一个小空间隔开；我成功地做到了这一点，但不幸的是图像没有水平对齐。第二和第三图像被定位在距离第一图像更远的下方

我在没有对css进行任何更改的情况下使用的html编码如下：

您需要编写一些CSS来完成这项工作。是如何操作的详细信息。

您是否已经检查过是否存在影响页面中元素的其他CSS规则？另外，作为补充说明，在第三张图像的hspace属性中有一个额外的斜杠（/）

还有，这个例子对你有帮助吗

HTML

编辑2:请删除包含段落中的BR标记，以便最终代码如下所示

@Punctweb

出于某种原因，以下代码在Web上运行。我只是把这些图片放在一起。虽然我认为这个代码看起来不太正确

---

谢谢你的邀请。我认为它也可以直接完成，而无需对CSS进行任何更改。我这么说是因为当我去掉所有3个“是”时，我；我知道这个问题，但我不知道没有CSS的其他方法。我看到你在用Wordpress。有些主题在自定义CSS的主题选项中有一个字段，因此您可以在其中插入代码。信息技术这是最简单的方法你好，我也这么做了，但是运气不好。这一定是阻止图像水平对齐的原因。我仍然有同样的问题。这是相当棘手的，可能我需要更改css样式表中的某些内容。我用了一个定制的主题wordpress@Demis如果您向我们展示一些您的projectPunctweb的实时/在线示例，那么解决这个问题可能会容易得多。请参阅附件中存在问题的链接。我再次尝试了你的代码，但结果相同。我只是一个接一个地添加了图像的html代码，并成功了。我不知道为什么会这样。请看上面的帖子

<a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator.jpg" class="my_image"><img style="float: left;" src="http://high-resolution-photos.com/stock_photos/royalty_free_3.jpg" alt="Northern_Ireland_MDM_Indicator" />
</a>
<a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas.jpg" class="my_image"><img style="float: left;" src="http://www.gettyimages.com/CMS/Pages/RoyaltyFree/StaticContent/113198687.jpg" alt="Northern_Ireland_School_Service_Areas" />
</a>
<a href="http://www.example.com/wp-content/uploads/2015/03/PCs_Gross_Wage.jpg" class="my_image"><img style="float: left;" src="http://www.royaltyfreeimages.net/wp-content/uploads/2010/09/royalty-free-images-mushroom-500x375.jpg" alt="PCs_Gross_Wage" />
</a>

.my_image {
    display: block;
    float: left;
    margin-right: 10px;
}

.my_image img {
    width: 150px;
    height: 150px;
}