如何删除添加的多余空格\ n

Question

如何在以下示例中删除<fieldset>之间的空格？这是一个JSFiddle。

HTML

<!-- Displays bad, but HTML looks good -->
<fieldset>test</fieldset>
<fieldset>test</fieldset>

<!-- Displays good, but HTML looks bad -->
<fieldset>test</fieldset><fieldset>test</fieldset>

CSS

*
{
    margin: 0;
    padding: 0;
}

fieldset
{
    background-color: red;
    display: inline-block;
}

我希望能够在HTML代码中的<fieldset>之间留出空格，因为它们的内容很长。但我需要它们显示在彼此旁边。

Answer 1

最佳解决方案是删除inline-block（或inline）个标记之间的空格。

您可以使用评论来提高可读性：

<fieldset>test</fieldset><!--
--><fieldset>test</fieldset>

没有可以100％可靠的CSS解决方案。

编辑：似乎并非如此，但有些模板引擎会提供此行为，例如twig的spaceless

Answer 2

<强> Demo

float: left;：

怎么样？

<强> CSS：

fieldset {
    background-color: red;
    float: left;
}

Answer 3

另一种解决方案是将字段集放在DIV容器中，并使用CSS为该容器将font-size设置为0。然后，当然，将字段集的字体大小设置回您需要的任何内容。

在父容器上将font-size设置为0基本上会删除该容器的内联块元素之间的空白。