使用换行符时，删除HTML元素之间的空格
我有一个约10 img的一页的页面。 为了HTML的可读性，我想在每个img标签之间插入一个换行符，但是这样做会在图像之间产生空白，这是我不想要的。 除了在标签中间而不是在它们之间打破，还有什么可以做的吗？
编辑：这是截至目前为止我所拥有的。 我想书籍脊柱图像显示在随机组合，使用PHP。 这就是为什么我需要单独的img标签。
你可以使用CSS。 在图像上设置display：block或者float：left可以让你定义自己的间距，然后根据需要设置HTML的格式，但是会影响布局的方式可能适用，也可能不适用。
否则，你正在处理内联内容，所以HTML格式是非常重要的 – 因为这些图像将有效地performance为单词。
对不起，如果这是旧的，但我只是find一个解决scheme。
尝试将font-size设置为0.因此，图像之间的空白宽度将为0，并且图像不会受到影响。
不知道这是否适用于所有的浏览器，但我用Chromium和一些带有display: inline-block; <li>元素来试用它display: inline-block; 。
你可以使用评论。
<img src="..." alt="..."><!-- --><img src="..." alt="..."><!-- --><img src="..." alt="..."><!-- --><img src="..." alt="...">
虽然我会担心有一系列图像的语义。
你有两个select，而不用CSS做近似的东西。 第一个select是使用JavaScript从标签中删除只有空白的孩子。 尽pipe如此，更好的select是使用这样一个事实，即空格可以存在于标签中，而不具有含义。 像这样：
<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>
经过太多的研究，试验和错误，我发现一种似乎工作正常的方式，并不需要手动重新设置子元素的字体大小，让我有一个标准化的EM字体大小整个文档。
在Firefox中，这非常简单，只需在父元素上设置word-spacing: -1em 。 由于某种原因，Chrome浏览器忽略了这一点（就我所testing的情况而言，无论数值如何，都会忽略字间距）。 所以，除此之外，我将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浏览器上testing了这个。我很想说这也可能适用于Safari，但我真的不知道…
这是一个演示http://jsbin.com/acucam
我太迟了（我只是问了一个问题，并在相关部分find薄），但我认为显示：table-cell; 是更好的解决scheme
<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; }
testingFirefox 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>是内联元素，因此HTML呈现器将这些元素之间的空格视为文本中的真实空格 – 多余空格（和换行符）将被截断，但单个空格将插入到文本元素的字符数据中。
定位<img>标签绝对可以防止这个，但我build议不要这样做，因为这将意味着将每个图像手动定位到一些像素度量，这可能是很多工作。
Flexbox可以轻松解决这个老问题：
.image-wrapper { display: flex; }
有关flexbox的更多信息： https ：//css-tricks.com/snippets/css/a-guide-to-flexbox/
另一个解决scheme是在空间的地方使用非常规的换行符。 这与前几个答案类似，是排列元素的一种替代方法。 它也是一个超级边缘优化技术，因为它用您的回车代替了标记中的空格。
<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); });
这将分离子元素，在再次添加子元素之前清除所有剩余的空白。
与此问题的其他答案不同，使用此方法可确保inheritance的CSS display和font-size值得以保留。 也没有必要使用float和繁琐的clear ，然后需要。 当然，你将需要使用jQuery。
我个人喜欢接受的答案，说没有确切的方法做这个，而不是用某种forms的技巧。
对我来说，这是一个令人讨厌的问题，有时可以让你浪费一个小时，想知道为什么一排checkbox没有正确alignment..因此，我必须有一个快速谷歌和我自己检查是否有一个CSS规则我不记得…但似乎没有:(
至于下一个最好的答案，使用字体大小…对我来说这是一个讨厌的黑客，稍后会咬你想知道为什么你的文本没有显示。
我通常使用PHP进行开发，并且在生成checkbox网格的情况下，PHP生成的内容将删除此问题，因为它不会插入任何间距/间隔。
简单地说，我会build议要么一起处理所有的图像，要么使用服务器端脚本来生成内容/图像。
我不使用删除元素之间的CR / LF，而是使用SGML处理指令，因为缩小器通常会删除注释，而不是XML PI。 当PHP处理PHP时，它具有将PI与CR / LF完全一起移除的额外好处，从而至less节省了8个字节。 您可以使用任意有效的指令名称，例如在X（HT）ML中保存两个字节。
白色空间：初始; 为我工作。
从语义上讲，使用有序或无序列表并不是最好的，然后使用CSS适当地devise样式吗？
<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，你将能够以任何你想要的方式来设置它的样式，并删除书之间的空格。
;){kind=link}