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

Question

我有一个大约10 img秒的页面.为了HTML的可读性,我想在每个img标记之间放置一个换行符,但这样做会在图像之间呈现空格,这是我不想要的.除了在标签中间而不是在它们之间打破之外,还有什么可以做的吗？

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

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

经过太多的研究,试验和错误,我找到了一种似乎工作正常的方法,并且不需要手动重新设置子元素上的字体大小,允许我在整个doc中具有标准化的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

我太迟了(我刚问了一个问题,并在相关部分找到了薄)但我认为显示: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>