我如何避免换行填充？ [英] How Do I Avoid Line-Break Padding?

问题描述

我对HTML最大的抱怨是换行符在元素之间增加了一点空间。 （ jsFiddle 。）

这可以搞砸了我们在某处读到，你可以删除这个隐式填充 - 同时仍然保持代码的正确性。 有些可读 - 通过使用这样的评论：

 <！ -  
  - >< div> Foo< / div><！ -  
  - >< div> Bar< / div><！ -  
  - >< div>等等... < / div><！ -  
  - > 
  

这有效，但我觉得必须有更好的解决方案。还有哪些方法可以解决分行填充问题？

解决方案

这不是一点点空间 ，但字面上是空格字符。您正在使用 display：inline-block 来横向对齐您的元素，这就是内联的作用。

如果你想使用 inline-block ，你需要删除元素之间的空白区域。

否则，您可以使用其他方法之一进行水平对齐，例如浮动或 display：table-cell 。

My biggest gripe with HTML is that line breaks add a tiny bit of space between elements. (jsFiddle.)

This can screw up layouts where child elements are sized to exactly fit their parents.

I read somewhere that you can remove this implicit padding - while still keeping the code somewhat legible - by using comments like this:

<!--
--><div>Foo</div><!--
--><div>Bar</div><!--
--><div>And so on...</div><!--
-->

This works, but I feel like there has to be a better solution. What other ways are there to work around the line-break padding?

解决方案

That isn't "a little bit of space", but literally a space character. You are using display: inline-block to align your elements horizonally, and that's how "inline" works.

If you want to use inline-block you need to remove the white space between the elements as you are doing it.

Otherwise you can use one of the other methods to horizontally align, for example floating or display: table-cell.

这篇关于我如何避免换行填充？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！