我有一个页面，其中一行大约有 10 个imgs。为了 HTML 的可读性，我想在每个 img 标记之间放置一个换行符，但这样做会在图像之间呈现空白，这是我不想要的。除了在标签中间而不是在它们之间打断之外，我还能做些什么吗？
编辑：这是我目前所拥有的截图。我希望使用 PHP 以随机组合显示书脊图像。这就是为什么我需要单独的img 标签。
【问题讨论】：
{strip}。 Other template engines 应该有类似的标签。
除了在标签中间而不是在它们之间打断之外，我还能做些什么吗？
不是真的。由于<img>s 是内联元素，HTML 渲染器将这些元素之间的空格视为文本中的真正空格——多余的空格（和换行符）将被截断，但单个空格将插入到文本元素的字符数据。
定位<img> 标签绝对可以防止这种情况发生，但我建议不要这样做，因为这意味着将每个图像手动定位到某个像素度量，这可能需要大量工作。
【讨论】：
你可以使用 cmets。
<img src="..." alt="..."><!--
--><img src="..." alt="..."><!--
--><img src="..." alt="..."><!--
--><img src="..." alt="...">
不过，我会担心将一系列图像并排放置的语义问题。
【讨论】：
font-size:0 在许多情况下很糟糕，因为您失去了继承。是的，您可以使用 rem 单位，但您的媒体查询仍然会停止该元素的功能，您必须全部修改它们
使用 CSS 样式表来解决这个问题，如以下代码。
[divContainer_Id] img
{
display:block;
float:left;
border:0;
}
在 Firefox 3.5 Final 上测试！
PS。你的 html 应该是这样的。
<div id="[divContainer_Id]">
<img src="[image1_url]" alt="img1" />
<img src="[image2_url]" alt="img2" />
<img src="[image3_url]" alt="img3" />
<img src="[image4_url]" alt="img4" />
<img src="[image5_url]" alt="img5" />
<img src="[image6_url]" alt="img6" />
</div>
【讨论】：
您可以使用 CSS。在图像上设置 display:block 或 float:left 可以让您定义自己的间距并根据需要设置 HTML 格式，但会以可能合适或不合适的方式影响布局。
否则，您正在处理内联内容，因此 HTML 格式很重要 - 因为图像将有效地像文字一样。
【讨论】：
您有两种选择，无需使用 CSS 进行近似处理。第一个选项是使用 javascript 从标签中删除只有空格的子级。一个更好的选择是使用空白可以存在于标签中而没有意义的事实。像这样：
<div id="[divContainer_Id]"
><img src="[image1_url]" alt="img1"
/><img src="[image2_url]" alt="img2"
/><img src="[image3_url]" alt="img3"
/><img src="[image4_url]" alt="img4"
/><img src="[image5_url]" alt="img5"
/><img src="[image6_url]" alt="img6"
/></div>
【讨论】：
从语义上讲，最好使用有序列表或无序列表，然后使用 CSS 对其进行适当的样式设置吗？
<ul id="[UL_ID]">
<li><img src="[image1_url]" alt="img1" /></li>
<li><img src="[image2_url]" alt="img2" /></li>
<li><img src="[image3_url]" alt="img3" /></li>
<li><img src="[image4_url]" alt="img4" /></li>
<li><img src="[image5_url]" alt="img5" /></li>
<li><img src="[image6_url]" alt="img6" /></li>
</ul>
使用 CSS，您可以随意设置样式并删除书籍之间的空白。
【讨论】：
对不起，如果这是旧的，但我刚刚找到了解决方案。
尝试将font-size 设置为0。这样图像之间的空白宽度将为0，图像不会受到影响。
不知道这是否适用于所有浏览器，但我尝试使用 Chromium 和一些带有 display: inline-block; 的 <li> 元素。
【讨论】：
em单位的布局。
font-size 设置为 0 意味着在此之后您不能使用 em 单元进行可扩展设计。对于某些人来说，这个答案是没有用的。
经过太多的研究、反复试验，我找到了一种似乎可以正常工作的方法，并且不需要在子元素上手动重新设置字体大小，从而使我可以在整个字体中使用标准化的 em 字体大小整个文档。
在 Firefox 中这相当简单，只需在父元素上设置 word-spacing: -1em。出于某种原因，Chrome 忽略了这一点（据我测试，它忽略了字间距，而不管值如何）。因此，除此之外，我将letter-spacing: -.31em 添加到父级，将letter-spacing: normal 添加到子级。这部分 em 是空间的大小仅当您的 em 大小标准化时。反过来，Firefox 会忽略字母间距的负值，因此不会将其添加到单词间距中。
我在 Firefox 13（win/ubuntu，Android 上的 14）、Google Chrome 20（win/ubuntu）、ICS 4.0.4 和 IE 9 上的 Android 浏览器上对此进行了测试。我想说这也可能有效在 Safari 上，但我真的不知道...
这是一个演示 http://jsbin.com/acucam
【讨论】：
word-spacing: -1em 样式似乎使当前版本的 Chrome 中的单词重叠。
元素之间的空白仅由 HTML 编辑器出于视觉格式化目的而放置在那里。您可以使用 jQuery 删除空格：
$("div#MyImages").each(function () {
var div = $(this);
var children= div.children();
children.detach();
div.empty();
div.append(children);
});
这会分离子元素，在再次添加子元素之前清除所有剩余的空格。
与此问题的其他答案不同，使用此方法可确保保留继承的 css display 和 font-size 值。也没有必要使用float 和麻烦的clear，这是必需的。当然，你需要使用 jQuery。
【讨论】：
另一种解决方案是在空格处使用非常规的换行符。这类似于前几个答案，并且是排列元素的另一种方式。它也是一种超级边缘优化技术，因为它用回车替换标记中的空格。
<img
src="image1.jpg"><img
src="image2.jpg"><img
src="image3.jpg"><img
src="image4.jpg">
请注意，任何代码中都没有空格。 HTML 中通常使用空格的地方被替换为回车符。它比使用 cmets 和使用 Paul de Vrieze 推荐的空格更简洁。
感谢 tech.co 这种方法。
【讨论】：
我来晚了（我只是问了一个问题，发现相关部分很薄）但我认为 display:table-cell; 是一个更好的解决方案
<style>
img {display:table-cell;}
</style>
<img src="img1.gif">
<img src="img2.gif">
<img src="img3.gif">
唯一的问题是它不适用于 IE 7 和更早版本，但可以通过 hack 修复
【讨论】：
display: table-* 并像用户在表格中导航一样读出。
inline-block。
我个人喜欢接受的答案，说明没有确切的方法可以做到这一点，而不是使用某种形式的技巧。
对我来说，这是一个烦人的问题，有时会让你浪费一个小时想知道为什么一排复选框没有全部正确对齐。因此我必须快速搜索一下谷歌并自己检查是否有一个我不记得的CSS规则......但似乎没有:(
至于使用字体大小的下一个最佳答案...对我来说，这是一个令人讨厌的技巧，稍后会在想知道为什么您的文本没有显示时会咬你。
我通常使用 PHP 进行很多开发，并且在我生成复选框网格的情况下，PHP 生成的内容消除了这个问题，因为它不插入任何间距/中断。
简单地说，我建议要么必须处理所有在同一行上的图像，要么使用服务器端脚本来生成内容/图像。
【讨论】：
我没有使用删除元素之间的 CR/LF，而是使用 SGML 处理指令，因为缩小器通常会删除 cmets，但不会删除 XML PI。当 PHP PI 由 PHP 处理时，它还有一个额外的好处，即完全删除 PI 以及其间的 CR/LF，从而节省至少 8 个字节。您可以使用任意有效的指令名称，例如并在 X(HT)ML 中保存两个字节。
【讨论】：
Flexbox 可以轻松解决这个老问题：
.image-wrapper {
display: flex;
}
更多关于 flexbox 的信息： https://css-tricks.com/snippets/css/a-guide-to-flexbox/
【讨论】：
{ flex-direction: row; flex-wrap: nowrap; } 以提高可读性。
flex-direction: row 和flex-wrap: nowrap，无论如何它们都是默认值。保持简单通常是最好的！此外，大多数时候用户实际上会想要flex-wrap: wrap。
空白：初始；对我有用。
【讨论】：
受Quentin's answer 的启发，您还可以将结束符 > 放在下一个标签的开头。
<img src="..." alt="..."
/><img src="..." alt="..."
/><img src="..." alt="..."
/><img src="..." alt="..."/>
【讨论】：