blocks|key|1294679|text|你可以使用CSS。在图像上设置display:block或float:left将允许您定义自己的间距，并以您想要的方式设置HTML的格式，但会以可能不合适或不合适的方式影响布局。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1294680|否则，您要处理的是内联内容，因此HTML格式很重要--因为图像实际上就像单词一样。|1294681|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

You could use CSS. Setting display:block, or float:left on the images will let you have define your own spacing and format the HTML however you want but will affect the layout in ways that might or might not be appropriate.

Otherwise you are dealing with inline content so the HTML formatting is important - as the images will effectively act like words.

blocks|key|1294891|text|抱歉，如果这是旧的，但我刚刚找到了一个解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1294892|尝试将font-size设置为0。因此，图像之间的空白宽度将为0，图像不会受到影响。|offset|length|style|CODE|1294893|我不知道这是否适用于所有的浏览器，但我在Chromium上试过了，在display:+inline-block;上也试过一些<li>元素。|1294894|entityMap^0|0|3|9|0|Y|M|1Q|4|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@$D|Q|E|R|F|G]|$D|S|E|T|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|K|$]]

Sorry if this is old but I just found a solution.

Try setting the <code>font-size</code> to 0. Thus the white-spaces in between the images will be 0 in width, and the images won't be affected.

Don't know if this works in all browsers, but I tried it with Chromium and some <code>&lt;li&gt;</code> elements with <code>display: inline-block;</code>.

blocks|key|1294582|text|你可以使用注释。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1294583|+<img+src="..."+alt="..."><img+src="..."+alt="..."><img+src="..."+alt="..."><img+src="..."+alt="...">|code-block|syntax|javascript|1294584|不过，我会担心一系列图像并排的语义问题。|1294585|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You could use comments.

<pre><code> &lt;img src="..." alt="..."&gt;&lt;!--
 --&gt;&lt;img src="..." alt="..."&gt;&lt;!--
 --&gt;&lt;img src="..." alt="..."&gt;&lt;!--
 --&gt;&lt;img src="..." alt="..."&gt;
</code></pre>

I'd worry about the semantics of having a series of images side by side though.

blocks|key|1295264|text|Flexbox可以很容易地解决这个老问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1295265|.image-wrapper+{
++display:+flex;
}|code-block|syntax|javascript|1295266|有关flexbox的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/|offset|length|1295267|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/snippets/css/a-guide-to-flexbox/^0|0|0|F|1J|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Flexbox can easily fix this old problem:

<pre><code>.image-wrapper {
 display: flex;
}
</code></pre>

More information about flexbox:
<a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="noreferrer">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a>

blocks|key|1509376|text|您有两个选择，而无需使用CSS做近似的事情。第一个选项是使用javascript从标记中删除仅包含空格的子代。不过，一个更好的选择是利用这样一个事实，即空白可以存在于标记内部，而不是有意义。如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1509377|<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>|code-block|syntax|javascript|1509378|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You have two options without doing approximate stuff with CSS. The first option is to use javascript to remove whitespace-only children from tags. A nicer option though is to use the fact that whitespace can exist inside tags without it having a meaning. Like so:

<pre><code>&lt;div id="[divContainer_Id]"
 &gt;&lt;img src="[image1_url]" alt="img1"
 /&gt;&lt;img src="[image2_url]" alt="img2"
 /&gt;&lt;img src="[image3_url]" alt="img3"
 /&gt;&lt;img src="[image4_url]" alt="img4"
 /&gt;&lt;img src="[image5_url]" alt="img5"
 /&gt;&lt;img src="[image6_url]" alt="img6"
/&gt;&lt;/div&gt;
</code></pre>

blocks|key|1295309|text|空格:首字母；适用于我。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1295310|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

white-space: initial; Works for me.

blocks|key|1295041|text|另一种解决方案是在空格的位置使用非传统的换行符。这类似于第一对答案，是排列元素的另一种方式。它也是一种超边缘优化技术，因为它用回车符替换了标记中的空格。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1295042|<img
src="image1.jpg"><img
src="image2.jpg"><img
src="image3.jpg"><img
src="image4.jpg">|code-block|syntax|javascript|1295043|请注意，这些代码中都没有空格。在HTML中通常使用空格的位置被替换为回车符。它没有像Paul+de+Vrieze推荐的那样既使用注释又使用空格的冗长。|1295044|这种方法归功于tech.co。|1295045|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Another solution would be to use unconventional line breaks in places of spaces. This is similar to the first couple answers, and is an alternative way of lining up elements. It also is a super-edge-optimization technique because it replaces spaces in your markup with carriage returns.

<pre><code>&lt;img
src="image1.jpg"&gt;&lt;img
src="image2.jpg"&gt;&lt;img
src="image3.jpg"&gt;&lt;img
src="image4.jpg"&gt;
</code></pre>

Note that there are no spaces in any of that code. Places where spaces are normally used in HTML are replaced with carriage returns. It's less verbose than both using comments and using whitespace like Paul de Vrieze recommended.

Credit to tech.co for this approach.

blocks|key|1295124|text|就我个人而言，我喜欢公认的答案，即没有确切的方法来做到这一点，不使用某种形式的技巧。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1295125|对我来说，这是一个恼人的问题，有时会让你浪费一个小时来思考为什么一行复选框没有正确对齐。因此，我不得不在谷歌上快速搜索一下，然后自己检查是否有一条我不记得的css规则……但似乎没有:(|1295126|至于下一个最好的答案，使用字体大小...对我来说，这是一个令人讨厌的技巧，稍后会咬你一口，想知道为什么你的文本没有显示出来。|1295127|我通常使用PHP开发很多东西，在我生成一个复选框网格的情况下，PHP生成的内容消除了这个问题，因为它不会插入任何空格/分隔符。|1295128|简单地说，我建议要么在一行中处理所有图像，要么使用服务器端脚本生成内容/图像。|1295129|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|N|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|O|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

Personally I like the accepted answer stating there is no exact way of doing this, not with out using a trick of some form.

To me, it is an annoying issue with at times can make you waste an hour wondering why a row of check boxes for example are not all aligned correctly.. Hence i had to have a quick google and myself check if there was a css rule that i have not remembered... but seems no :( 

As for the next best answer, of using font-size... to me this is a nasty hack that will bite you later on wondering why your text is not showing.

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.

Simply, i would suggest either having to deal with the images all being on a single line together or using a server side script to generate the content/images.

blocks|key|1509841|text|我没有使用来删除元素之间的CR/LF，而是使用SGML处理指令，因为缩略程序通常会删除注释，而不是XML+PI。当PHP+PI由PHP处理时，它还有一个额外的好处，那就是将PI连同中间的CR/LF一起完全删除，从而节省至少8个字节。您可以使用任意有效的指令名，例如，在X(HT)ML中节省两个字节。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1509842|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1295341|text|受Quentin's+answer的启发，您还可以将结束>放在下一个标记的开头。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1295342|+<img+src="..."+alt="..."
+/><img+src="..."+alt="..."
+/><img+src="..."+alt="..."
+/><img+src="..."+alt="..."/>|code-block|syntax|javascript|1295343|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/1097063/5675325^0|1|G|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Inspired by <a href="https://stackoverflow.com/a/1097063/5675325">Quentin's answer</a>, you can also place the closing > next to the start of the next tag.

<pre><code> &lt;img src="..." alt="..."
 /&gt;&lt;img src="..." alt="..."
 /&gt;&lt;img src="..." alt="..."
 /&gt;&lt;img src="..." alt="..."/&gt;
</code></pre>

blocks|key|1509452|text|从语义上讲，最好使用有序或无序列表，然后使用CSS对其进行适当的样式设置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1509453|<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>|code-block|syntax|javascript|1509454|使用CSS，您将能够以任何您想要的方式设置样式，并删除书之间的空格。|1509455|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Semantically speaking, wouldn't it be best to use an ordered or unordered list and then style it appropriately using CSS?

<pre><code>&lt;ul id="[UL_ID]"&gt;
 &lt;li&gt;&lt;img src="[image1_url]" alt="img1" /&gt;&lt;/li&gt;
 &lt;li&gt;&lt;img src="[image2_url]" alt="img2" /&gt;&lt;/li&gt;
 &lt;li&gt;&lt;img src="[image3_url]" alt="img3" /&gt;&lt;/li&gt;
 &lt;li&gt;&lt;img src="[image4_url]" alt="img4" /&gt;&lt;/li&gt;
 &lt;li&gt;&lt;img src="[image5_url]" alt="img5" /&gt;&lt;/li&gt;
 &lt;li&gt;&lt;img src="[image6_url]" alt="img6" /&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

Using CSS, you'll be able to style this whatever way you want and remove the whitespace imbetween the books.

blocks|key|1509580|text|元素之间的空格只是由HTML编辑器出于可视格式化目的而放在那里的。您可以使用jQuery删除空格：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1509581|$("div#MyImages").each(function+()+{

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

});|code-block|syntax|javascript|1509582|这将分离子元素，在再次添加子元素之前清除所有剩余的空格。|1509583|与此问题的其他答案不同，使用此方法可确保继承的css+display和font-size值保持不变。也不需要使用float和随后需要的繁琐的clear。当然，您需要使用jQuery。|offset|length|style|CODE|1509584|entityMap^0|0|0|0|R|7|Z|9|1K|5|1Y|5|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]|$K|W|L|X|M|N]|$K|Y|L|Z|M|N]|$K|10|L|11|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|P|$]]

The whitespace between the elements is only put there by the HTML editor for visual formatting purposes. You can use jQuery to remove the whitespace:

<pre><code>$("div#MyImages").each(function () {

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

});
</code></pre>

This detaches the child elements, clears any whitespace that remains before adding the child elements back again.

Unlike the other answers to this question, using this method ensures that the inherited css <code>display</code> and <code>font-size</code> values are maintained. There's also no need to use <code>float</code> and the cumbersome <code>clear</code> that is then required. Of course, you will need to be using jQuery.

I have a page with a row of about 10 <code>img</code>s. For readability of the HTML, I want to put a linebreak in between each <code>img</code> tag, but doing so renders whitespace between the images, which I do not want. Is there anything I can do other than break in the middle of the tags rather than between them?

Edit: Here is a screenshot of what I have so far. I would like the book spine images to display in random combinations, using PHP. This is why I need separate <code>img</code> tags.

<img src="https://i.stack.imgur.com/V50kO.jpg" alt="Screenshot">

Removing whitespace between HTML elements when using line breaks

服务器

jQuery

我有一个大约有10个img的页面。为了可读性，我想在每个img标记之间加一个换行符，但这样做会在图像之间呈现空格，这是我不想要的。除了在标签中间而不是在标签之间中断之外，我还能做什么吗？编辑:这是我到目前为止的截图。我想书的书脊图像显示在随机组合，使用PHP。这就是为什么我需要单独的img标签。​​

问在使用换行时删除HTML元素之间的空格
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在使用换行时删除HTML元素之间的空格EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在使用换行时删除HTML元素之间的空格
EN