web-dev-qa-db-ja.com

2つのスパン要素間の余分なスペースを削除するにはどうすればよいですか？

enter image description here

これら2つの要素の間の余分なスペースを削除したいと思います。試しましたができませんでした。これはマージンの崩壊の問題ですか？

これをどのように解決できますか？その余分なスペースを削除するにはどうすればよいですか？

これは私の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;
}
htmlcssmargin
20
Nikhil

タイトルが間違っているように見えます-h1は、テキストとパーセントボックスの間にスペースを生じさせているものです。削除するにはこれを試してください：

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

それが実際にあなたが話しているスパンであるならば、あなたはそれらの間の空白を取り除く必要があります-これについて他の答えを見てください

4
Pete

HTML要素間の空白文字により、新しいテキストブロックが作成され、要素間のスペースとして表示されます。

要素間の空白をすべて削除して、要素を削除します。

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

または、空白をコメントブロックで埋めることもできます。

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

置く <span>タグの間にスペースを入れずに同じ行に配置します。

19
Tony Zampogna

これは、HTMLのspan要素の奇妙な動作です。最初のスパンのスタイルがtext-decoration: underline;の場合、1つの余分なスペースにも下線が引かれます。

spanをdivに変更し、display: inline-blockをdivに適用することで解決しました。

0
Oleg Abrazhaev

私はこれが答えられたことを知っていますが、私はこれを別の方法で行ったでしょう-元の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/

通常、スタイルとコンテンツおよびセマンティクスを分離する方がはるかに優れています。レイアウトなどを変更する必要が生じた場合に、作業が簡単になります。

0
Justin