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

除了在标签中间而不是在它们之间断开之外，我还能做什么呢？

没有。由于 <img>是内联元素，因此 HTML 呈现程序将这些元素之间的空格视为文本冗余空格(和换行符)中的真空格，这些空格将被截断，但单个空格 威尔将被插入到文本元素的字符数据中。

定位的 <img>标签绝对可以防止这一点，但我建议不要这样，因为这将意味着定位每个图像手动到一些像素测量，这可以是很多工作。

你可以发表评论。

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

不过，我担心的是并排放置一系列图像的语义问题。

使用 CSS 样式表来解决这个问题，如下面的代码所示。

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

alt text http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgle3tdRJd2y08CnnoPLy/Capture.PNG

Testing on Firefox 3.5 Final!

你的 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 和一些 <li>元素与 display: inline-block;。

经过大量的研究、试验和错误，我发现了一种方法，似乎工作得很好，不需要手动重新设置字体大小的子元素，让我有一个标准化的 em 字体大小，整个文档。

在 Firefox 中，这非常简单，只需在父元素上设置 word-spacing: -1em。出于某种原因，Chrome 忽略了这一点(据我测试，它忽略了单词间距而不考虑其值)。因此，除此之外，我将 letter-spacing: -.31em添加到父级，将 letter-spacing: normal添加到子级。Em 的这个分数是空间 除非你的 em 大小是标准化的的大小。Firefox 则忽略字母间距的负值，因此不会将其添加到单词间距中。

我在 Firefox 13(win/ubuntu，14在 Android 上) ，Google Chrome 20(win/ubuntu) ，ICS 4.0.4和 IE 9上的 Android 浏览器上测试了这个。我很想说这个也可以在 Safari 上使用，但是我真的不知道..。

这是 http://jsbin.com/acucam的演示

元素之间的空白只是由 HTML 编辑器用于可视化格式化目的。您可以使用 jQuery 来删除空格:

$("div#MyImages").each(function () {


var div = $(this);
var children= div.children();
children.detach();
div.empty();
div.append(children);


});

这将分离子元素，在再次添加子元素之前清除剩余的所有空格。

与这个问题的其他答案不同，使用这个方法可以确保维护继承的 cssdisplay和 font-size值。也不需要使用 float和那时需要的繁琐的 clear。当然，您需要使用 jQuery。

另一种解决方案是在空间的某些地方使用非传统的断线。这类似于前两个答案，是排列元素的另一种方法。它还是一种超级优化技术，因为它用回车替换标记中的空格。

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

注意，这些代码中都没有空格。通常在 HTML 中使用空格的位置被回车符替换。它不像 Paul de Vrieze 推荐的那样使用注释和空格那样冗长。

这种方法要归功于 tech.co。

我太晚了(我只是问了一个问题，并在相关部分找到瘦) ，但我认为 < em > 显示: 表格单元格; 是一个更好的解决方案

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


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

唯一的问题是它不能在 IE7和早期版本上工作，但是可以通过黑客技术修复

就我个人而言，我喜欢接受的答案说，没有确切的方法做到这一点，不使用某种形式的把戏。

对我来说，这是一个恼人的问题，有时可以让你浪费一个小时想知道为什么一行复选框例如没有正确对齐。.因此，我必须有一个快速谷歌和自己检查，如果有一个 CSS 规则，我没有记住... 但似乎没有: (

至于下一个最好的答案，使用字体大小... 对我来说，这是一个令人讨厌的黑客行为，你会咬你后来想知道为什么你的文本没有显示。

I generally develop a lot with PHP and in the case of where i am generating a grid of check boxes, the PHP generated content removes this problem as it does not insert any spacing/breaks.

简单地说，我建议要么处理所有的图像都在一条线上，要么使用服务器端脚本来生成内容/图像。

Instead of using to remove a CR/LF between elements, I use the SGML processing instruction because minifiers often remove the comments, but not the XML PI. When the PHP PI is processed by PHP, it has the additional benefit of removing the PI completely along with the CR/LF in between, thus saving at least 8 bytes. You can use any arbitrary valid instruction name such as and save two bytes in X(HT)ML.

Flexbox 可以很容易地解决这个老问题:

.image-wrapper {
display: flex;
}

更多关于 Flexbox 的信息: Https://css-tricks.com/snippets/css/a-guide-to-flexbox/

空白: 首字母; 对我有用。

受到 Quentin's answer的启发，您还可以将结束 > 放在下一个标记的开始处。

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