使用换行符时删除 HTML 元素之间的空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1097006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing whitespace between HTML elements when using line breaks
提问by Skilldrick
I have a page with a row of about 10 imgs. For readability of the HTML, I want to put a linebreak in between each imgtag, 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?
我有一个大约 10img秒的页面。为了 HTML 的可读性，我想在每个img标签之间放置一个换行符，但这样做会在图像之间呈现空白，这是我不想要的。除了在标签中间而不是在它们之间中断之外，我还能做些什么吗？
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 imgtags.
编辑：这是我到目前为止所拥有的截图。我希望使用 PHP 以随机组合显示书脊图像。这就是为什么我需要单独的img标签。
采纳答案by edeverett
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.
你可以使用 CSS。在图像上设置 display:block 或 float:left 将使您可以定义自己的间距并根据需要设置 HTML 格式，但会以可能或可能不合适的方式影响布局。
Otherwise you are dealing with inline content so the HTML formatting is important - as the images will effectively act like words.
否则，您正在处理内联内容，因此 HTML 格式很重要 - 因为图像将有效地像文字一样。
回答by opatut
Sorry if this is old but I just found a solution.
对不起，如果这是旧的，但我刚刚找到了一个解决方案。
Try setting the font-sizeto 0. Thus the white-spaces in between the images will be 0 in width, and the images won't be affected.
尝试将 设置font-size为 0。这样图像之间的空白宽度将为 0，图像不会受到影响。
Don't know if this works in all browsers, but I tried it with Chromium and some <li>elements with display: inline-block;.
不知道这是否适用于所有浏览器，但我在 Chromium 和一些<li>带有display: inline-block;.
回答by Quentin
You could use comments.
你可以使用评论。
<img src="..." alt="..."><!--
--><img src="..." alt="..."><!--
--><img src="..." alt="..."><!--
--><img src="..." alt="...">
I'd worry about the semantics of having a series of images side by side though.
不过，我会担心并排放置一系列图像的语义。
回答by Paul de Vrieze
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:
您有两种选择，无需使用 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>
回答by William Grasel
Flexbox can easily fix this old problem:
Flexbox 可以轻松解决这个老问题：
.image-wrapper {
display: flex;
}
More information about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
有关 flexbox 的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
回答by Vladimir
I'm too late (i just asked a question and find thin in related section) but i think display:table-cell;is a better solution
我来晚了（我刚刚问了一个问题，并在相关部分中发现很薄）但我认为display:table-cell; 是更好的解决方案
<style>
img {display:table-cell;}
</style>
<img src="img1.gif">
<img src="img2.gif">
<img src="img3.gif">
the only problem is it will not work on IE 7 and Earlier versions but thats fixable with a hack
唯一的问题是它不适用于 IE 7 和更早版本，但可以通过 hack 修复
回答by Flatline
After way too much research, trial and error I found a way that seems to works fine and doesn't require to manually re-set the font size manually on the children elements, allowing me to have a standardized em font size across the whole doc.
经过过多的研究、反复试验，我找到了一种似乎工作正常的方法，并且不需要在子元素上手动重新设置字体大小，从而使我可以在整个文档中使用标准化的 em 字体大小.
In Firefox this is fairly simple, just set word-spacing: -1emon the parent element. For some reason, Chrome ignore this (and as far as I tested, it ignores the word spacing regardless of the value). So besides this I add letter-spacing: -.31emto the parent and letter-spacing: normalto the children. This fraction of an em is the size of the space ONLY IF your em size is standardized. Firefox, in turn, ignores negative values for letter-spacing, so it won't add it to the word spacing.
在 Firefox 中，这相当简单，只需word-spacing: -1em在父元素上设置即可。出于某种原因，Chrome 忽略了这一点（据我测试，它忽略单词间距，而不管值如何）。所以除此之外，我将添加letter-spacing: -.31em到父级和letter-spacing: normal子级。仅当您的 em 大小是标准化的时，em 的这一部分才是空间的大小。反过来，Firefox 会忽略字母间距的负值，因此不会将其添加到单词间距中。
I tested this on Firefox 13 (win/ubuntu, 14 on android), Google Chrome 20 (win/ubuntu), Android Browser on ICS 4.0.4 and IE 9. And I'm tempted to say this may also work on Safari, but I don't really know...
我在 Firefox 13（win/ubuntu，Android 14）、Google Chrome 20（win/ubuntu）、ICS 4.0.4 和 IE 9 上的 Android 浏览器上对此进行了测试。我很想说这也适用于 Safari，但我真的不知道...
Here's a demo http://jsbin.com/acucam
这是一个演示http://jsbin.com/acucam
回答by Soul_Master
Use CSS stylesheet for solving this problem like the following code.
使用 CSS 样式表来解决这个问题，就像下面的代码。
[divContainer_Id] img
{
display:block;
float:left;
border:0;
}
Testing on Firefox 3.5 Final!
在 Firefox 3.5 Final 上测试！
PS. your html should like this.
附注。你的 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>
回答by Konrad Rudolph
Is there anything I can do other than break in the middle of the tags rather than between them?
除了在标签中间而不是在它们之间中断之外，我还能做些什么吗？
Not really. Since <img>s are inline elements, spaces between these elements are considered by the HTML renderer as true spaces in text – redundant spaces (and line breaks) will be truncated but single spaces willbe inserted into the character data of the text element.
并不真地。由于<img>s 是行内元素，这些元素之间的空格被 HTML 渲染器视为文本中的真正空格——多余的空格（和换行符）将被截断，但单个空格将被插入到文本元素的字符数据中。
Positioning the <img>tags absolutely can prevent this but I'd advise against this since this would mean positioning each of the images manually to some pixel measure which can be a lot of work.
定位<img>标签绝对可以防止这种情况发生，但我建议不要这样做，因为这意味着手动将每个图像定位到某个像素度量，这可能需要大量工作。
回答by Artur
white-space: initial; Works for me.
空白：初始；为我工作。
