まとまりのないブログ

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

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

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

関連記事

SG-77010

シルバーグリス tt-7025-tu10

シルバーグリス tt-7025-tu10という製品について。熱伝導率は8.2W/M.kで容量は10g。値段は1000円以下で購入できる格安のCPUクーラーに利用するシルバーグリスで性能は可もなく不可も …

no image

SpriteKitのrunActionを遅延させる

SKspriteNodeを遅延させるには let wait = SKAction.waitForDuration(1) someNode.runAction(wait) とかすればすればいい。ループの …

no image

DSPack Delphi

DSPackとは? DirectShowを使いやすくしたライブラリ。動画の再生やウェブカメラ映像の保存などの機能を使いたいときに使うライブラリかもしれない。 DSPackでできること 動画を再生する …

no image

Gigazine倉庫問題の民事裁判で判決が出た模様

「GIGAZINE倉庫破壊事件」で編集長が敗訴した理由 バトルは控訴審へ – 弁護士ドットコム 内容は、 Gigazine側が敗訴 問題となっていた倉庫の撤去・退去を命じられる 賃料相当の …

cocos2d-x javascript no.4 スプライトを作成する

画像無しで矩形スプライトを作成する var sprite = cc.Sprite.create(); sprite.setTextureRect(cc.rect(0,0,100,100)); spri …