まとまりのないブログ

something which something is something

css 雑記・雑学

html5でcanvas要素の下部に7pxのマージンが発生してしまう件

投稿日:

htmlのレンダリングに関することで、canvas要素を3つほど連続して配置したときに謎の空白が下部に発生するのを確認した。意味がわからないのは、<!DOCTYPE html> を文書先頭に付加してhtml5として宣言するとこの空白が発生するということ。宣言を外せば空白は発生しない。

たとえばこんな感じで。

<div class="wrap">

	<canvas id="top"  width="550px" height="70px" style="display:block;background-color:rgb(41, 41, 41)">
	
	<canvas id="middle"  width="550px" height="70px" style="background-color:rgb(41, 41, 41)">
	
	<canvas id="bottom"  width="550px" height="70px" style="background-color:rgb(41, 41, 41)">
</div>

canvas要素というものはデフォルトでinline属性となっている様子。で、この問題を解決する場合はこのcanvas要素のスタイルにdisplay:blockを設定してあげれば下部の余白は解消される。DOCTYPE宣言の有無で表示が変わるのが意味不すぎてしばらくハマってしまった。

-css, 雑記・雑学

執筆者:


comment

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

no image

swift – itunes store にサインイン画面が何度も表示される

iPhoneアプリ開発中にStoreKitの購入処理をデバッグしていたら、アプリ起動時にサインインを求められる画面が表示されるようになった。これが表示されるようになった原因は、直前の購入処理がうまくい …

no image

a要素の記述 その順番

a要素のスタイルを記述する場合には、 a:link a:visited a:hover a:active という順番で記述しなければならない。そうしないと記述通りに表示がされない模様。例えばa:vis …

no image

海外通販で注文したラズベリーパイゼロが届いた

pimoroniというラズベリーパイを中心に売っている海外の通信販売サイトで注文したラズパイゼロが届いた。注文から到着まで約1周間強といったところ。普通の通販と違って海外からなので最悪届かないんじゃな …

no image

No space left on device デバイスに空き領域がありません

Ubuntuサーバーでファイルをmvしようとしたとき、No space left on device となってファイルの移動コマンドを受け付けないようになってしまった。移動できない場合の原因として主な …

no image

thinkpad R500のCPUをP8700へ換装

thinkpad R500のCPUをceleron dual core T3000からCore 2 duo P8700へ換装してみた。作業自体はやや難航したがなんとか無事交換できたので結果のベンチマー …