Question

我认为这是一个重复的问题，但作为一个相对缺乏HTML经验的人，我不知道究竟要搜索什么，而且我无法从我尝试的谷歌搜索中找到直接答案。

我正在为旧网站的侧边栏编写HTML。侧边栏没什么特别之处 - 顶部是一个小图片，后面是下面列出的一些明文链接，放在网页的侧面，带有CSS样式。每个链接都采用以下形式：

<a href="/subpage/"><span class="c2">Subpage</span></a><br>

为了使文档更具可读性，我已将各种链接扩展为以下内容：

<a href="/subpage/">
    <span class="c2">Subpage</span>
</a>
<br>

然而，当我这样做时，在每个链接的上方和下方放置一些额外的填充像素。最终，组合添加的填充会导致链接最终与页面下方的元素重叠，这是我不想要的。

我已经意识到HTML converts a newline to a space，但这似乎是一个截然不同的问题。我很想知道是什么原因导致这个填充出现，因为我很难在在线HTML游乐场中复制它。

下面是侧边栏HTML的模型以及我认为相关的CSS文件部分：

＆＃13;

body{
    margin: 1px 10px 10px 10px;
    padding:1px 10px 10px 10px;
    background-image: url(../../images/ribbon.jpg);
}

#lh-col{
    position: absolute;
    top: 1px;
    left: 5px;
    width: 110px;
    margin: 1px;
    padding: 1px;
}

#rh-col{
    margin: 0px 21px 0px 100px;
    padding: 20px;
}

span.c2 {color: #004080; font-family: Arial; font-size: 85%}

＆＃13;

<body>
    <div id="lh-col">
        <p>
            <a href="/">
                <img src="images/logo.gif" border="0" alt="Text" width="33" height="22">
            </a>
        </p>
        <p>
            <a href="/page1/">
                <span class="c2">Page 1</span>
            </a>
            <br>
            <a href="/page2/">
                <span class="c2">Page 2</span>
            </a>
            <br>
            <a href="/page3/">
                <span class="c2">Page 3</span>
            </a>
            <br>
        </p>
    </div>
    <div id="rh-col">
        <!-- The rest of the page... -->
    </div>
</body>

＆＃13;

Answer 1

浏览器因在内联元素https://css-tricks.com/fighting-the-space-between-inline-block-elements/之间添加额外填充而臭名昭着，当HTML中存在换行符或空格时。有几种方法可以避免这种情况：

使用HTML缩小器http://minifycode.com/html-minifier/。（或工作流程工具会更有效率）
重写HTML以手动删除空格。要关注的唯一必要部分是在一个元素的结束标记和下一个元素的开放标记之间没有空格。即</a><a>
其他答案中提到的flexbox解决方案。
调整您的CSS以补偿两个<a>彼此相邻的情况，而负余量则是第二个（不建议这样，但它是一个选项）。 a + a{margin-left: -4px;}

Answer 2

另一种解决方案是将显示块添加到a标记

此外，如果我对此进行编码，我甚至不会包含p标记或br标记。除非你出于某种原因需要它们。

body {
  margin: 1px 10px 10px 10px;
  padding: 1px 10px 10px 10px;
  background-image: url(../../images/ribbon.jpg);
}

#lh-col {
  position: absolute;
  top: 1px;
  left: 5px;
  width: 110px;
  margin: 1px;
  padding: 1px;
}

#rh-col {
  margin: 0px 21px 0px 100px;
  padding: 20px;
}

span.c2 {
  color: #004080;
  font-family: Arial;
  font-size: 85%
}

#lh-col p a {
  display: block;
}

<body>
  <div id="lh-col">
    <p>
      <a href="/">
        <img src="images/logo.gif" border="0" alt="Text" width="33" height="22">
      </a>
    </p>
    <p>
      <a href="/page1/">
        <span class="c2">Page 1</span>
      </a>
      <a href="/page2/">
        <span class="c2">Page 2</span>
      </a>
      <a href="/page3/">
        <span class="c2">Page 3</span>
      </a>
    </p>
  </div>
  <div id="rh-col">
    <!-- The rest of the page... -->
  </div>
</body>

或者你可以更加语义化，并使用flexbox简化：

nav {
display: flex;
flex-direction: column;
}

<nav>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>

Answer 3

旧的黑客是使用注释来隐藏空格：

<a href="/subpage/"><!--
    --><span class="c2">Subpage</span><!--
--></a>

当然，这会导致代码更难以使用。

＆＃34;展开＆＃34;标签在行之间插入空格

3 个答案: