如何删除两个跨度元素之间的额外空间？答案

【问题标题】：How to remove the extra space between two span elements?如何删除两个跨度元素之间的额外空间？
【发布时间】：2014-05-06 13:19:17
【问题描述】：

我想删除这两个元素之间的多余空间。我试过但做不到。这是margin collaps的问题吗？

如何解决？如何删除多余的空间？

这是我的 html：

 <div id="output">
       <i>
         <span id="grade">Your grade :</span>
         <span id="total"></span>
         <span id="max"></span>
        <center><h1><span id="percentage"></span></h1></center>
       </i>
    </div>

这是我的 CSS：

body
{
width:250px;
height:100px;
background : #F2F2F2;
}

#output 
{
font-family : roboto light ;
color : #A4C639;
font-size : 30px;
}

#grade
{
font-size : 25px;
color : black;
}

#max
{
color : black;
}

#percentage
{
background : #A4C639;
color : #FFFFFF;
padding : 15px;
border-radius : 15px;
}

【问题讨论】：

具体是哪两个 span 元素？你有四个。
但其中一个跨度是 id="percentage" 的跨度，我认为其他三个在一行中。
@nikhil 你考虑过压缩的 html 文件吗？
我也不确定您是否正确使用了<i> 标签。如果您需要这种语义区分，不妨考虑使用 <b> 标签。
<center> 已弃用。

标签： html css margin

【解决方案1】：

HTML 元素之间的空白字符创建一个新的文本块，显示为元素之间的空格。

删除元素之间的所有空白以摆脱它：

<span id="total"></span><span id="max"></span>

或者，您可以使用注释块填充空格：

<span id="total"></span><!--
--><span id="max"></span>

【讨论】：

评论技巧很巧妙，我喜欢。另外，如果你在使用注释方法时遇到 eslint 错误，你可以在上面添加一个

【解决方案2】：

将<span> 标记放在同一行，它们之间没有任何空格。

【讨论】：

它没有改变哥们
您确定没有在#max 中添加额外的空格字符吗？
啊……很难说你说的是哪个跨度。

【解决方案3】：

看起来好像您的标题有误 - 您的 h1 是导致文本和百分比框之间的空格的原因。要删除试试这个：

#output h1 {margin-top:0; padding-top:0;}

如果它实际上是您正在谈论的跨度，那么您需要删除它们之间的任何空白 - 请参阅其他答案

【讨论】：

你是对的，伙计！
引起了麻烦。您的解决方案有效，但我将 margin-top 的值更改为 25px。谢谢哥们！
@nikhil h1 是一个块元素，它的默认边距不为零。
好的@KingKing，我已经编辑了我的评论，0 我提到的是#output h1 {margin-top:0;皮特给出的 padding-top:0;}。

【解决方案4】：

我知道这个问题已经得到解答，但我会采取不同的做法 - 原始 HTML 将显示和语义元素组合在一起（带有斜体、H1 和中心标签）。

我会这样处理 HTML：

<div id="output">
  <span class="grade">
    Your grade :
    <span class="total">123</span>/<span class="max">777</span>
    <div class="percentage">23.45%</div>
  </span>
</div>

CSS 是这样的：

#output {
    font-style:italic;
    text-align: center;
    font-family : roboto light;
    color : #A4C639;
    font-size : 30px;
    width: 250px;
}

.grade {
    font-size : 25px;
    color: black;
}

.total {
    color : #A4C639;
}

.max {
    margin-left:0;
}

.percentage {
    text-align: center;
    font-size: 200%;
    background : #A4C639;
    color : #FFFFFF;
    padding : 15px;
    border-radius : 15px;
}

这为您提供了您所追求的，但样式和布局完全在 CSS 标记中完成。

如果你想看到它的实际效果，试试这个 jsfiddle：http://jsfiddle.net/justin_thomas/P6wmJ/19/

通常最好将您的风格与您的内容和语义分开。如果您需要更改布局等，它会让事情变得更容易。

【讨论】：

【解决方案5】：

这是 HTML 中 span 元素的一些奇怪行为。如果第一个 span 的样式为 text-decoration: underline;，那么额外的一个空格也会加下划线。

我通过将span 更改为div 并将display: inline-block 应用于div 解决了这个问题。

【讨论】：

【解决方案6】：

在你的 CSS 中尝试i{font-size:0}#output span{font-size:30px;}

【讨论】：

请不要。它非常hacky，而不是问题的根本原因。
不明白这种方法有什么问题@jsalonen .. 你能否给出一些提示，为什么你不喜欢这种方法。
一旦它会用i标签搞乱你所有的其他CSS。它也不能解决根本原因。例如，如果您从 HTML 复制并粘贴文本，它仍然可能包含额外的空格。

引起了麻烦。您的解决方案有效，但我将 margin-top 的值更改为 25px。谢谢哥们！