Question

如何删除HTML中图像周围不需要的空间？

我的一张图片远离文字，它正在弄乱网站的外观。我使用的CSS没有任何问题，但我相信因为它周围有太多HTML标签，所以它有很大的空间。

请限制基本CSS和HTML的解决方案，因为我可以正确理解它是如何工作的。

编辑：对不起，我对我的挑战有点模糊。我正在使用Bootstrap库，并且一直在寻找以下模板：

我非常喜欢这个模板，我偶尔会从中获取代码片段。我使用了顶部栏，并用不同的图像替换了他们的徽标。图像在桌面上看起来很好，但是当我的手机上出现时，它会显示出覆盖一些重要内容的太低。你们能做些什么吗？

编辑2：

我附上了两张外观照片以及问题所在。第一个是桌面视图（很棒），第二个是移动视图（太低）。我没有更多的信息......从原帖到编辑1，编辑2，这就是我所拥有的所有信息。

Answer 1

删除图像之间的空格和换行符：

＆＃13;

    <img src="http://placehold.it/20x20" />   <img src="http://placehold.it/20x20" />
    <img src="http://placehold.it/20x20" />

＆＃13;

为：

＆＃13;

    <img src="http://placehold.it/20x20" /><img src="http://placehold.it/20x20" /><img src="http://placehold.it/20x20" />

＆＃13;

Answer 2

将它放在你的css文件中：

img {
    margin: 0;
}

或在html文件中使用此内嵌样式：

<style type="text/css">
    img {
        margin: 0;
    }
</style>

Answer 3

您可以使用letter-spacing CSS的适当性

img {
  letter-spacing: -2px;
}

Answer 4

我认为您应该删除代码之间的空格！所以你必须改变这段代码

<img src="1.jpg" />   
<img src="2.jpg" />
<img src="3.jpg" />

到此代码（添加评论代码）

<img src="1.jpg" /><!--  
--><img src="2.jpg" /><!--
--><img src="3.jpg" />

或此代码（字面意思是删除空格）

<img src="1.jpg" /><img src="2.jpg" /><img src="3.jpg" />

Answer 5

由于模板使用twitter bootstrap，尝试将img-responsive类添加到您的图片

示例，来自：

<img src="1.jpg" />

到

<img class="img-responsive" src="1.jpg" />