使用换行符时删除HTML元素之间的空格

我有一行大约10 imgs的页面。为了提高HTML的可读性，我想在每个img标签之间插入一个换行符，但是这样做会在图像之间呈现空白，这是我所不希望的。除了在标签中间而不是在标签中间打断之外，我还能做些其他事情吗？

编辑：这是我到目前为止的屏幕截图。我希望使用PHP以随机组合显示书脊图像。这就是为什么我需要单独的img标签的原因。

您可以使用CSS。在图像上设置display：block或float：left将使您可以定义自己的间距并按需要设置HTML格式，但会以可能适合或不合适的方式影响布局。

否则，您将处理内联内容，因此HTML格式很重要-因为图像将有效地像单词一样。

对不起，如果这是旧的，但我刚刚找到了解决方案。

尝试将其设置font-size为0。这样，图像之间的空白宽度将为0，并且图像不会受到影响。

不知道这是否适用于所有浏览器，但我尝试使用Chromium并尝试使用某些<li>元素display: inline-block;。

您可以使用注释。

 <img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="...">

我会担心并排放置一系列图像的语义。

您有两种选择，而无需使用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>

Flexbox可以轻松解决此旧问题：

.image-wrapper {
  display: flex;
}

有关flexbox的更多信息：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

经过大量的研究，反复试验，我发现一种似乎可以正常工作的方法，不需要手动在子元素上手动重新设置字体大小，从而使我可以在整个文档中使用标准化的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

我来不及了（我只是问了一个问题，并在相关章节中找到了答案），但我认为display：table-cell; 是更好的解决方案

<style>
img {display:table-cell;}
</style>

<img src="img1.gif">
<img src="img2.gif">
<img src="img3.gif">

唯一的问题是它将无法在IE 7和更低版本上运行，但多数民众赞成可以通过黑客修复

使用CSS样式表来解决此问题，例如以下代码。

[divContainer_Id] img
{
    display:block;
    float:left;
    border:0;
}

替代文本http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgle3tdRJd2y08CnP。

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

除了在标签中间而不是在标签中间打断之外，我还能做些其他事情吗？

并不是的。由于<img>s是内联元素，因此HTML渲染器将这些元素之间的空格视为文本中的真实空格-多余的空格（和换行符）将被截断，但单个空格将插入到文本元素的字符数据中。

<img>绝对放置标签可以防止这种情况，但是我建议您这样做，因为这将意味着手动将每个图像放置到某个像素尺寸，这可能需要很多工作。

另一种解决方案是在空间位置使用非常规的换行符。这类似于前几个答案，是排列元素的另一种方法。这也是一种超边缘优化技术，因为它用回车符替换了标记中的空格。

<img
src="image1.jpg"><img
src="image2.jpg"><img
src="image3.jpg"><img
src="image4.jpg">

请注意，任何代码中都没有空格。HTML中通常使用空格的位置将被回车代替。与使用注释和使用Paul de Vrieze建议的空白一样，它不那么冗长。

感谢tech.co的这种方法。

空格：初始；为我工作。

元素之间的空格仅由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。

我个人喜欢接受的答案，它说明没有确切的方法可以做到这一点，而不是不使用某种形式的技巧。

对我来说，这是一个令人烦恼的问题，有时可能使您浪费一个小时，想知道为什么例如一排复选框未全部正确对齐。我不记得了...但似乎没有:(

至于下一个最佳答案，就是使用font-size ...对我来说这是一个令人讨厌的技巧，稍后您会想知道为什么您的文本没有显示出来，这会给您带来麻烦。

我通常使用PHP进行很多开发，并且在我生成复选框网格的情况下，PHP生成的内容消除了此问题，因为它没有插入任何空格/空格。

简而言之，我建议要么将所有图像都放在一行上，要么使用服务器端脚本来生成内容/图像。

我使用SGML处理指令，而不是使用删除元素之间的CR / LF，因为缩小符通常删除注释，而不是XML PI。当PHP PI由PHP处理时，它还有另一个好处，就是可以完全删除PI及其之间的CR / LF，从而节省至少8个字节。您可以使用任意有效的指令名称，例如，并在X（HT）ML中保存两个字节。

受Quentin答案的启发，您还可以在下一个标签的开始位置旁边放置“>”。

 <img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."/>

从语义上讲，不是最好使用有序列表或无序列表，然后使用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，您可以随意设置样式，并消除书籍之间的空白。