Html &引用；展开；标记在行之间插入空格

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

我正在为一个旧网站的侧边栏编写HTML。侧边栏一点也不新奇——顶部是一个小图片，后面是一些列在下面的纯文本链接，放置在带有css样式的网页侧面。每个链接采用以下形式：

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

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

a

标记中

此外，如果我正在编写此代码，我甚至不会包括

p

标记或

br

标记。除非你出于某种原因需要它们

正文{
保证金：1px10px 10px 10px；
填充：1px10px 10px 10px；
背景图像：url（../../images/ribbon.jpg）；
}
#左柱{
位置：绝对位置；
顶部：1px；
左：5px；
宽度：110px；
保证金：1px；
填充：1px；
}
#右柱{
利润率：0px21px0px100px；
填充：20px；
}
span.c2{
颜色：#004080；
字体系列：Arial；
字体大小：85%
}
#左柱p a{
显示：块；
}

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

a

标记中

此外，如果我正在编写此代码，我甚至不会包括

p

标记或

br

标记。除非你出于某种原因需要它们

正文{
保证金：1px10px 10px 10px；
填充：1px10px 10px 10px；
背景图像：url（../../images/ribbon.jpg）；
}
#左柱{
位置：绝对位置；
顶部：1px；
左：5px；
宽度：110px；
保证金：1px；
填充：1px；
}
#右柱{
利润率：0px21px0px100px；
填充：20px；
}
span.c2{
颜色：#004080；
字体系列：Arial；
字体大小：85%
}
#左柱p a{
显示：块；
}

浏览器因在HTML中的内联元素之间存在换行符或空格时在它们之间添加额外的填充而臭名昭著。有几种方法可以避免这种情况：

使用HTML缩略器。（或者工作流工具会更有效）

重写HTML以手动删除空格。唯一需要关注的部分是在一个元素的结束标记和下一个元素的打开标记之间没有空格。i、 e.

其他答案中提到的flexbox解决方案

调整CSS以补偿两个

相邻且第二个为负边距的情况（不建议这样做，但这是一个选项）。

a+a{左边距：-4px；}

---

浏览器因在内联元素之间添加额外的填充而臭名昭著，当它们之间在HTML中有换行符或空格时。有几种方法可以避免这种情况：

使用HTML缩略器。（或者工作流工具会更有效）

重写HTML以手动删除空格。唯一需要关注的部分是在一个元素的结束标记和下一个元素的打开标记之间没有空格。i、 e.

其他答案中提到的flexbox解决方案

调整CSS以补偿两个

相邻且第二个为负边距的情况（不建议这样做，但这是一个选项）。

a+a{左边距：-4px；}

---

一个老办法是使用注释隐藏空格：

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

---

当然，这会导致代码更加难看。

一个老办法是使用注释隐藏空格：

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

---

当然，这会导致代码更难处理。

一种解决方案是不“展开”代码tags@StefanBob很明显，这是最简单的解决方案，但如果没有其他问题的话，我想了解为什么这个编辑会导致不直观的行为，这样我就可以更好地了解HTML和CSS了。一个解决方案是不要“展开”这个tags@StefanBob很明显，这是最简单的解决方案，但如果没有其他问题的话，我想了解为什么这个编辑会导致不直观的行为，这样我就可以更好地了解HTML和CSS了。这似乎会导致链接之间的空间更大。就

p

和

br

标记而言，我正在一点一点地缩减这个站点，因为我不能100%确定站点上下文中需要什么和不需要什么。这不是最干净的文件。另外，因为删除

br

标记会将所有链接放在一个包装线上。我编辑答案并删除br。看起来不错？我添加了第二个更干净的方法，如果您可以稍微返工代码的话。flexbox没有间距问题；）如果你在寻找白色空间的原因和方式，

块

解决方案确实解决了我的核心问题，我会等待另一个答案，所以我倾向于给出这个答案，但我仍然好奇为什么。我可能会等几分钟，然后将此标记为回答。我也可能会在稍后查看

nav

和

flexbox

；现在我只需要稍微做些修改就可以整理一下了，以后我有了更多的喘息空间后，我就可以使用

nav

解决方案了。双重荣誉。这似乎会在链接之间造成更大的空间。就

p

和

br

标记而言，我正在一点一点地缩减这个站点，因为我不能100%确定站点上下文中需要什么和不需要什么。这不是最干净的文件。另外，因为删除

br

标记会将所有链接放在一个包装线上。我编辑答案并删除br。看起来不错？我添加了第二个更干净的方法，如果您可以稍微返工代码的话。flexbox没有间距问题；）我会再等一次