小开

缩小你的HTML!

减小它呈现给浏览器的响应之前是一个很好的实践。

因此，除非你需要空格(并且你使用 硬编码它)，你总是在缩小过程中删除空格。

小开

图像是默认的内联元素，这就是为什么你会看到它们之间有空格。如果你在屏幕阅读器上听你的例子，你马上就知道为什么了:如果没有空白，你会听到:

我的小东西，小东西，小东西，小东西

因此，使用my mini thing.(点号加空格)作为alt文本或将带有CSS的图像推到一起。不要只是删除代码中的空白。

小开

在大多数情况下，当空格位于块元素旁边时，浏览器会忽略它。

图像(在本例中)的问题是它们是内联元素，因此当您将它们写在单独的行上时，它们实际上是同一行上的元素，它们之间有一个空格(因为换行符也算作空格)。浏览器删除图像之间的空格是不正确的，在它们之间使用换行符编写图像标记应该与在同一行中使用空格编写图像标记的处理方式相同。

你可以使用CSS来让图像块元素和浮动它们彼此相邻，这解决了很多关于间距的问题，包括图像之间的空间和图像下面的文本行上的间距。

小开

不幸的是，换行符也算作空格字符。

我提出的最好的解决方案是在标签内部使用空白，而不是在标签外部:

  <img src="images/minithing.jpg" alt="my mini thing"
/><img src="images/minithing.jpg" alt="my mini thing"
/><img src="images/minithing.jpg" alt="my mini thing"
/><img src="images/minithing.jpg" alt="my mini thing" />

我知道这也不理想。但至少它不是一些奇怪的CSS黑客，依赖于一个空间字符的大小被渲染或诉诸于相对定位，或JavaScript:)

小开

最佳答案

哦，你可以很容易地用一行CSS实现:

#parent_of_imgs { white-space-collapse: discard; }

你会问，缺点?没有浏览器实现这个功能非常有用的特性(考虑内联块一般)。: - (

我时常做的事是，尽管它像黑夜一样丑陋，就是使用评论:

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

小开

这是一个简单的问题，但答案并不那么简单。

人们可以尝试避免源代码中的空格，这在CMS中并不总是可以实现，因为它们是由系统自动插入的。如果你想改变这一点，你必须深入挖掘CMS的核心代码。

然后你可以尝试使用左浮动图像。但这很危险。首先，根据定义，您无法真正控制垂直对齐。其次，如果你有很多浮动元素，你会陷入完全的混乱，它们超过了一行。如果你有一个依赖于左浮动元素的布局(现在大多数都是这样)，你甚至可以打破一些外部浮动样式，如果你在图像后清除浮动。如果浮动任何周围的元素，这可以被覆盖。宁可不推荐。

因此，唯一的解决方案是使用CSS声明来处理空格处理过程。这不是任何标准的一部分(因为css3还没有完成)。

我更喜欢在HTML变体中没有空白。使用drupal作为CMS，这可以在你的template.php和主题文件中很容易实现。然后我选择内联块。

< p >注。在不同的浏览器中使用内联块相当复杂。对于FF 2，你需要显示:-moz-inline-box。其余的和IE8可以有display: inline-block后立即。对于lte IE 7，你需要在下面单独的声明中显示:inline(最好是通过条件注释)

编辑

我用来做一个元素内联块

elem.inline {
display: -moz-inline-box; /* FF2 */
display: inline-block; /* gives hasLayout in IE 6+7*/
}
/* * html hack for IE 6 */
* html elem.inline {
display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
/* * +  html hack for IE 7 */
* + html elem.inline {
display: inline; /* elements with hasLayout and display inline behave like inline-block */
}

小开

你可以将容器的font-size设置为0，然后white-space就消失了!

小开

这个解决方案有什么困难之处?

css

.no-whitespace {
line-height: 0;
font-size: 0;
}

超文本标记语言

<span class="no-whitespace">


<a href=# title='image 1'>
<img src='/img/img1.jpg' alt='img1'/>
</a>


<a href=# title='image 2'>
<img src='/img/img2.jpg' alt='img2'/>
</a>


<a href=# title='image 3'>
<img src='/img/img3.jpg' alt='img3'/>
</a>


</span>

小开

<style>
img {
display: table-cell
}
</style>
<img src="images/minithing.jpg" alt="my mini thing" />...

好吧，我可能是幸运的，因为我现在只需要担心让这个工作在webkit(特别是一个嵌入在QT)，所以它在Chrome和Safari也工作。display: table-cell似乎拥有显示的所有好处:inline-block，但没有空格的缺点(想想缩进的td)

小开

如果你正在使用php，这将非常有效。我找到了解决办法。

我最初是在寻找一些东西，在用类似simplexml的东西解析超文本标记语言后，删除仅由whitespace组成的文本节点，但这要便宜得多。

<?ob_start(function($html) {return preg_replace('/>\s+</','><',$html);});?>
<img src='./mlp.png'/>
<img src='./dbz.png'/>
<img src='./b10af.png'/>
<img src='./fma.png'/>
<?ob_end_flush;?>

小开

对此的最新解决方案是在外部容器上使用display: flex，您可以尝试以下示例:

< a href = " http://codepen。io / taras_g /钢笔/ cAKdv”> Codepen → < / >

(是的，Flexbox正在得到广泛支持:http://caniuse.com/#search=flexbox)

HTML:

<!-- Disregard spaces between inline-block elements? -->
<div class="box">
<span></span>
<span></span>
<span></span>
</div>

< >强CSS

.box {
display: flex;
display: -webkit-flex;
}


span {
display: inline-block;
width: 30px;
height: 30px;
background-color: #fcf;
border: 2px solid #f9f;
}

另外，如果你想让你的项目自动换行(就像标准的内联块元素一样)，不要忘记在你的flexbox容器中添加flex-wrap: wrap。

小开

试试这个CSS:

img { display: table-cell; }

忽略HTML中的空白

css

超文本标记语言