如何让标签之间的空格不显示？答案

【问题标题】：How can I get whitespace between tags to not show up?如何让标签之间的空格不显示？
【发布时间】：2009-02-07 06:53:52
【问题描述】：

我正在尝试使用锚标签创建一个菜单，它们应该彼此相邻，因此相关链接可以用边框连接。下面是一些示例代码：

<html>
<head>
    <style type="text/css">
        a {
            border: 1px solid #939393;
            margin: 15px;
            padding: 8px;
        }
        a:hover {
            border-color: #111;
        }
        a.collapse-left {
            border-left-width: 0px;
            margin-left: 0px;
        }
        a.collapse-right {
            border-right-width: 0px;
            margin-right: 0px;
        }



    </style>
</head>
<body>
    <div class="body">
        <a href="#" class="collapse-right primary">This is</a>
        <a href="#" class="collapse-right collapse-left click">A group</a>
        <a href="#" class="collapse-left hover">Of Three</a>

        <a href="#" class="">I am by myself</a>

        <a href="#" class="collapse-right">We are</a>
        <a href="#" class="collapse-left">a pair</a>

    </div>
</body>
</html>

组合在一起的按钮之间有一些空白。这是由<a> 标记之间的换行引起的。可以删除这些换行符，问题就消失了，但是代码的可读性要差很多。

是否可以保留换行符但不显示空白？

【问题讨论】：

实际上，我认为是下一行前面的制表符或空格导致了空白，而不是换行符。
你确定吗，约翰和约翰？我只是将他的代码粘贴到一个新文档中并删除了前导空格，渲染没有变化。（分组按钮之间仍然有一个小间隙。）
连续的空白被组合成一个显示，所以是的，换行符本身也会这样做
是的，我相信它是任何空格，包括空格、制表符和换行符。

标签： html css

【解决方案1】：

您应该通过将 <a> 的 CSS 更改为以下内容来将框变成块：

a {
    border: 1px solid #939393;
    margin: 15px;
    padding: 8px;
    display: block;
    float: left;
}

【讨论】：

请注意，这将使父 div 崩溃，除非您向其添加 overflow:auto 或清除 div。

【解决方案2】：

不理想，但它有效并且比放在一条线上更好：

<a href="#">First link</a><!--
--><a href="#">Second link</a><!--
--><a href="#">Third link</a>

请注意，我通常会使用列表标记进行站点导航以避免此类问题，但上述解决方案解决了一般的空白问题。

【讨论】：

【解决方案3】：

我认为内联元素 (span, em, a) 在它们周围流动文本空白，而块级元素不会 (P, h1, div)。

为了创建导航栏，我通常将链接包装在无序列表的列表项中，并给出 li float:left 强制 display:block 然后它们通常彼此相对。

【讨论】：

【解决方案4】：

不，锚点之间的空格被合并为一个，它们显示在你的锚点之间，因为它们都在一条“线上”在一起（即使该线跨越源代码中的多行）。更好的方法是使用样式化的无序列表。但是，在 IE 中（我认为只有 IE6，但也可能是 IE7），您仍然会得到带有列表项的空格。

【讨论】：

【解决方案5】：

我对列表也有同样的问题。我找到的解决方案（并且完全有效）是将右括号放在下一个开始之前，我想您也可以使用 a 元素来做到这一点：

    <a href="#" class="collapse-right primary">This is</a
    ><a href="#" class="collapse-right collapse-left click">A group</a
    ><a href="#" class="collapse-left hover">Of Three</a>

【讨论】：

【解决方案6】：

 <div class="body">
    <a href="#" class="collapse-right primary">This is</a
    ><a href="#" class="collapse-right collapse-left click">A group</a
    ><a href="#" class="collapse-left hover">Of Three</a>

    <!--alternate way.-->
    <a href="#" class="">I am by myself</a><
    a href="#" class="collapse-right">We are</a><
    a href="#" class="collapse-left">a pair</a>

</div>

【讨论】：

您的“替代”示例是无效的 XML，因为 XML 不允许在 < 和标签名称之间使用空格。见w3.org/TR/2008/REC-xml-20081126/#sec-starttags。不确定 HTML/SGML 是否也是如此，但我想是的。

【解决方案7】：

使用跨度来包含您的链接集将有助于减少在锚点上放置类名的需要（在该悬停中不是跨浏览器在 IE6 上不起作用，但在 IMO 上可以接受）：-

<html>
<head>
    <style type="text/css">

        span.linkSet { border: 1px solid #939393; margin: 15px; padding: 8px }
        span.linkSet:hover {border-color: #111; }

    </style>
</head>
<body>
    <div class="body">

        <span class="linkSet">
            <a href="#" >This is</a
            ><a href="#" >A group</a
            ><a href="#" >Of Three</a>
        </span>

        <span class="linkSet">
            <a href="#">I am by myself</a>
        </span>

        <span class="linkSet">
            <a href="#" >We are</a
            ><a href="#" >a pair</a>
        </span>

    </div>
</body>
</html>

【讨论】：