Html 如何删除两个跨度元素之间的额外空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22689794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove the extra space between two span elements?
提问by Nikhil
I want to remove the extra space between these two elements. I tried but couldn't do it. Is this a problem of margin collapsing?
我想删除这两个元素之间的额外空间。我试过了，但做不到。这是边距崩溃的问题吗？
How can this be solved? How can I remove that extra space?
如何解决这个问题？如何删除多余的空间？
Here is my html :
这是我的 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>
Here is my css:
这是我的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;
}
采纳答案by Pete
It looks as if you have the wrong title - your h1is what is causing the space between the text and the percentage box. To remove try this:
看起来好像你有错误的标题 - 你h1是什么导致文本和百分比框之间的空间。要删除试试这个：
#output h1 {margin-top:0; padding-top:0;}
If it actually the spans you are talking about then you need to remove any white space that is between them - See the other answers for this
如果它实际上是您正在谈论的跨度，那么您需要删除它们之间的任何空白 - 请参阅其他答案
回答by jsalonen
Whitespace characters between HTML elements create a new text block, which is displayed as a space between the elements.
HTML 元素之间的空白字符创建一个新的文本块，显示为元素之间的空格。
Remove all the whitespacing between the elements to get rid of it:
删除元素之间的所有空格以摆脱它：
<span id="total"></span><span id="max"></span>
Alternatively, you can fill the whitespaces with a comment block:
或者，您可以使用注释块填充空格：
<span id="total"></span><!--
--><span id="max"></span>
回答by Tony Zampogna
Put the <span>tags on the same line without any space between them.
将<span>标签放在同一行上，它们之间没有任何空格。
回答by Justin
I know this has been answered, but I would have done this differently - the original HTML is combining display and semantic elements together ( with the italic, H1 and center tags).
我知道这已经得到了回答，但我会以不同的方式做这件事 - 原始 HTML 将显示和语义元素组合在一起（带有斜体、H1 和中心标签）。
I would do the HTML like this:
我会做这样的 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>
And the CSS like so:
和 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;
}
This gives you what you were after but the style and layout was done totally in the CSS markup.
这给了您想要的东西，但样式和布局完全在 CSS 标记中完成。
If you want to see it in action try this jsfiddle: http://jsfiddle.net/justin_thomas/P6wmJ/19/
如果你想看到它的实际效果，试试这个 jsfiddle：http: //jsfiddle.net/justin_thomas/P6wmJ/19/
It is usually much better to separate your style from your content and semantics. It will make things easier if you ever need to change the layout and so on.
将您的风格与您的内容和语义分开通常会更好。如果您需要更改布局等，它将使事情变得更容易。
回答by Oleg Abrazhaev
That's some weird behavior of span elements in HTML.
If the first span has style text-decoration: underline;then one extra space will be underlined also.
这是 HTML 中 span 元素的一些奇怪行为。如果第一个跨度有样式，text-decoration: underline;那么一个额外的空格也将被加下划线。
I solved it by changing spanto divand applying display: inline-blockto divs.
我通过更改span为div并应用display: inline-block到 div来解决它。
回答by user1857711
try i{font-size:0}#output span{font-size:30px;}in your css
试试i{font-size:0}#output span{font-size:30px;}你的 css
