Question

我有一个大约10 img行的页面。为了便于阅读HTML，我想在每个img标记之间添加换行符，但这样做会在图像之间呈现空格，这是我不想要的。除了在标签中间而不是在它们之间断开之外，还有什么可以做的吗？

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

Screenshot

Answer 1

很抱歉，如果这是旧的，但我找到了解决方案。

尝试将font-size设置为0.因此，图像之间的空白宽度为0，图像不会受到影响。

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

Answer 2

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

否则，您正在处理内联内容，因此HTML格式很重要 - 因为图像实际上就像单词一样。

Answer 3

您可以使用评论。

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

我担心将一系列图像并排的语义。

Answer 4

你有两个选择，没有用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>

Answer 5

Flexbox可以轻松解决这个老问题：

.image-wrapper {
  display: flex;
}

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

Answer 6

经过太多的研究，试验和错误我发现了一种似乎工作正常的方法，并且不需要手动重新设置子元素上的字体大小，允许我有一个标准化的em字体大小整个文档。

在Firefox中，这非常简单，只需在父元素上设置word-spacing: -1em即可。出于某种原因，Chrome忽略了这一点（就我测试而言，无论值如何，它都会忽略字间距）。除此之外，我将letter-spacing: -.31em添加到父级，将letter-spacing: normal添加到子级。 em的这一部分是空间的大小仅在您的em尺寸标准化时。反过来，Firefox会忽略字母间距的负值，因此不会将其添加到字间距。

我在Firefox 13（win / ubuntu，14 on android），Google Chrome 20（win / ubuntu），ICS 4.0.4和IE 9上的Android浏览器上进行了测试。我很想说这也可能有效在Safari上，但我真的不知道......

这是一个演示http://jsbin.com/acucam

Answer 7

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

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

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

唯一的问题是它不适用于IE 7和早期版本，但可修复黑客攻击

Answer 8

使用CSS样式表解决此问题，如下面的代码。

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

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

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

Answer 9

除了在标签中间而不是在它们之间断开之外，还有什么可以做的吗？

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

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

Answer 10

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

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

请注意，任何代码中都没有空格。通常在HTML中使用空格的位置将替换为回车符。它比使用评论和使用Paul de Vrieze推荐的空白更简洁。

感谢tech.co采用这种方法。

Answer 11

white-space：initial;适合我。

Answer 12

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

Answer 13

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

对我而言，这是一个烦人的问题，有时可能会让你浪费一个小时，想知道为什么一排复选框，例如并非所有对齐都正确..因此我必须有一个快速的谷歌和我自己检查是否有一个我没记得的css规则......但似乎没有:(

至于下一个最好的答案，对我使用font-size ...这是一个讨厌的黑客，以后会咬你，想知道为什么你的文字没有显示。

我通常使用PHP开发很多，并且在我生成复选框网格的情况下，PHP生成的内容会消除此问题，因为它不会插入任何间距/中断。

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

Answer 14

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

Answer 15

受Quentin's answer的启发，您还可以在下一个标记的开头旁边放置“>”。

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

Answer 16

从语义上讲，最好不要使用有序或无序列表，然后使用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，您可以按照自己想要的方式设置样式，并删除书籍之间的空白。

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

16 个答案: