如何防止进入空地？

Question

自从我第一次学习HTML以来，这一直困扰着我。

<style>
.test{
    display:inline-block;
    background-color:#aaa;
    padding:5px 10px;
    margin:0;
    border:0;
    }
</style>

<div class="test">Hello</div>
<div class="test">Woooorld</div>
<div class="test">HTML</div>
<div class="test">CSS</div>

我肯定希望将元素保存在不同的行中，因为它变得不可读。但HTML将输入转换为空间，从而破坏了布局。 Float会导致一系列新问题，或者根本无法解决我想要做的事情。

对于除第一个元素之外的所有内容实施一些hacky负边距，真的没有更好的解决方案吗？

Answer 1

稍微更改一下HTML：

<div class="test">asdasd</div
><div class="test">asdasd</div
><div class="test">asdasd</div
><div class="test">asdasd</div>

Demo。由于当前布局中的所有<div> - s都是inline-block元素，因此浏览器将它们之间的空白视为同一类 - 内联 - 元素，为它们分配一些可视空间。

Answer 2

我更愿意让元素浮动而不是改变HTML。 CSS用于显示。

工作：

<style>
.test{
    display:inline-block;
    float: left;
    width:50px;
    height:50px;
    background-color:#aaa;
    }
</style>

HTML：

<div class="test">asdasd</div>
<div class="test">asdasd</div>
<div class="test">asdasd</div>
<div class="test">asdasd</div>

Answer 3

解决此问题的不同方法。

link：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

第一道：

<div class="test">Hello</div><div
class="test">Woooorld</div><div
class="test">HTML</div><div
class="test">CSS</div>

或

<div class="test">Hello</div
><div class="test">Woooorld</div
><div class="test">HTML</div
><div class="test">CSS</div>

第二路：

<div class="test">Hello</div><!--
--><div class="test">Woooorld</div><!--
--><div class="test">HTML</div>
<div class="test">CSS</div>

第三种方式：     使用负边距。

  display: inline-block;
  margin-right: -4px;

第4路     略过结束标记

<div class="test">Hello
<div class="test">Woooorld
<div class="test">HTML
<div class="test">CSS</div>

第五种方式     将包装器div的字体大小设置为零。

第六种方式 也许他们根本不需要内联阻塞，也许他们可能会以这种或那种方式浮动。

Answer 4

我自己的解决方案是通过PHP脚本实现动态HTML缩小 - 它在将HTML源发送到浏览器之前从HTML源中删除所有换行符和标签（除非所述空格位于一个按字面意思呈现空格的元素内，例如textarea或任何white-space:pre-wrap或类似的元素

Answer 5

也应该工作......

<div class="test">asdasd</div><!--
--><div class="test">asdasd</div><!--
--><div class="test">asdasd</div><!--
--><div class="test">asdasd</div>

Answer 6

将div放在容器div中并设置容器font-size:0;，然后设置子div font-size:14pt，例如，这可以解决您的问题。

这是一个有效的 fiddle