キャンバス要素の下のスペースを削除しますか？

は、私は次のコードで、私はcanvas要素間の間隔を削除するキャンバス要素の下のスペースを削除しますか？

canvas{ width: 1000pt;height: 100pt; margin: 0px; } 
 
.bluecolor{background-color : skyblue;} 
 
.orangecolor{ background-color : darkblue;} 
 
.indianred{background-color : \t #CD5C5C ;}


 
<html> 
 
<body> 
 
<canvas id="canvas1" class = "orangecolor" > </canvas> 
 
<canvas id="canvas2" class = "bluecolor" > </canvas> 
 
<canvas id="canvas3" class = "indianred" ></canvas> 
 
</body> 
 
</html>

を書いた、そしてそれは、彼らがどのようにそれを達成する間にスペースを持たないようにしたいですか？

また、余白を明示的にゼロにしたときに、なぜスペースがあるのですか？

私はHTML、CSS、JavaScriptの初心者ですが、私の質問を適切に構成していないのであれば、以下のコメントにそれを言いますと、うれしく思います。

出典

2017-01-22 Anonymous

canvas { 
    display: block; 
}

これはトリックを行う必要があります。

OK、について説明：

は今今「G」が低く下降ことに注意してください..「W」の文字を検討し、「G」..テキストのようなまたは簡潔な文字のためにそれを考えることができ、キャンバスがインラインで見ます'w'よりも一列に並んでいるので、文字 'g'がレンダリングされると、ベースラインの下にスペースがあるので、 'wg'がレンダリングされると、 'w'の下に空白があります。

あなたのインライン要素キャンバスの下に表示されます。

はちょうどインライン事から抜け出すとHTMLをレンダリングするときのcanvas要素の新しい行が空白として扱われ、それをdisplay: block

出典

2017-01-22 15:34:22

なぜそうですか？なぜそれは働いたのですか？ –

@Stranger - キャンバス要素は置換された要素であり、デフォルトではインライン要素なので、要素の下端がベースラインです。また同じ行にはストラットがあります。これは、同じベースラインにアライメントされたゼロ幅の擬似文字ですが、その一部はそのベースラインの下に垂れ下がります。下の行の上端は、ベースラインの下にぶら下がっているストラットのビットを含めて、その行の下になければなりません。キャンバスをブロック要素にすることで、線もストラットもなく、余分なスペースを必要としません。 – Alohci

コメントをコメントに追加するのではなく、回答自体に説明を付ける方がよいでしょう。 –

を与えることができます。それらをブロックとして表示するように変換するか、インラインで必要な場合はマイナスのマージンを設定することができます。

canvas { display: block;}

または

canvas { margin: -2px; }

出典

2017-01-22 15:44:09 Kesniet

私は行を削除してもまだそれらの間にスペースがありますか？ –

このスペースは改行で</canvas>と<canvas>の間に作成されます。

は、canvas要素の親要素のため

body{font-size:0}

または終了タグの間に改行を削除して、このようなcanvas要素の開始タグをfont-size:0を追加してください。

<canvas></canvas><canvas></canvas><canvas></canvas>

出典

2017-01-23 04:08:51 defghi1977

私はそれを試しましたが、そうではありません、あなた自身で試してください。 –

このような？ https://jsfiddle.net/defghi1977/455v4z2o/ – defghi1977

キャンバス要素の下のスペースを削除しますか？

答えて

関連する問題