Html 删除div块之间的空白

如何删除div块周围的这些空白块？ 我的代码如下：

HTML:

演示：

使用：

 .accordion {font-size:0px; }

这是因为显示：内联块；使DIV的行为举止得体

---

与内联元素类似（如单词之间的空格）

您需要删除div之间的空格

为了更好的可读性，您可以这样做

<div class="accordion">
    <div class="accordionitem horizontal">
    </div><div class="accordionitem vertical">
    </div><div class="accordionitem vertical">
    </div>
</div>

---

内联块倾向于添加这些空格，因为它在标记（包括新行）之间拾取空格/文本。要删除这些白色空格，请按如下方式注释掉div之间的区域

<div class="accordion">
    <div class="accordionitem horizontal"></div><!--
    --><div class="accordionitem vertical"></div><!--
    --><div class="accordionitem vertical"></div>
</div>

---

您还可以从CSS中删除

显示：内联块

，并添加

浮动：左

：

.accordion: after {
    clear: both;
}

.accordionitem {
    background-color: green;
    float: left;
}

---

.

您可以通过几种方法来实现这一点

1. .accordion {font-size:0px; }

2.  .accordionitem{margin-right: -4px;}

3.  <div class="accordion">
        <div class="accordionitem horizontal"></div><!--
        --><div class="accordionitem vertical"></div><!--
        --><div class="accordionitem vertical"></div>
    </div>

1。手风琴{字体大小：0px；}
2.accordionitem{右边距：-4px；}
3.

---

这很容易。。。谢谢尽管我认为这是去gosure的正确方法，但这或多或少是一种黑客行为。。请记住为任何包含文本的内部元素指定字体大小；）@Huangism使用“显示：内联块”正在成为这类东西非常流行的解决方案。。你可以说这是一个黑客行为，但我认为这应该是“内联块”的自然行为，可能最终会出现在规范中。。谁知道呢。@webkit它的行为应该是这样的，空间是由于每个内联块之间的空间。就像在跨距之间有一个空格一样。虽然这个解决方案很方便，但它迫使你给孩子们一个合适的字体大小。谢谢，但我最喜欢css，所以我可以保留我的HTMLformating@lordkain这不是一个解决办法。这是摆脱空间的正确方法。之所以有空格，是因为HTMLANK中有一个空格，我现在有了我的解决方案：）只需要几分钟就可以标记它。字体大小可能重复，你也可以使用行高

。手风琴{行高：0em；}

我不知道为什么这被否决，这似乎是一个很好的方法。我最喜欢这一个，仅仅是因为我想在大div中添加一个列表，而这个解决方案正好可以。我不认为在布局中使用float是必要的，或者在任何方面都是有益的，在这种情况下。@DhavalPanchal我不同意1或2，因为3是正确的方式，但是他们都work@DhavalPanchal在这种情况下，我不同意克里斯·科伊尔的观点。选项二是维护的噩梦。几个参与者使用“正确”或“正确”来定义他们的方法。有没有人愿意描述一下他们将自己的方法命名为恰当或正确的技术基础。

<div class="accordion">
    <div class="accordionitem horizontal"></div><!--
    --><div class="accordionitem vertical"></div><!--
    --><div class="accordionitem vertical"></div>
</div>

.accordion: after {
    clear: both;
}

.accordionitem {
    background-color: green;
    float: left;
}

1. .accordion {font-size:0px; }

2.  .accordionitem{margin-right: -4px;}

3.  <div class="accordion">
        <div class="accordionitem horizontal"></div><!--
        --><div class="accordionitem vertical"></div><!--
        --><div class="accordionitem vertical"></div>
    </div>