まとまりのないブログ

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

ANAREA Battle Royale というバトロワゲーが事実上開発中止になっている件

ANAREA Battle Royaleとは? ANAREA Battle Royale https://store.steampowered.com/app/1103950/ANAREA_Battl …

no image

電子書籍のメリットとデメリット

電子書籍のメリットとデメリットについて メリット 書店に買いに行かなくてもインターネットを介して入手できる 場所を取らない・本棚がいらない ポイント購入に対応している場合がある デメリット 販売主がサ …

no image

BIGLOBEモバイルに電話認証が追加されていた件

※認証は通話料無料でできるように改善された模様 契約しているのビッグローブの管理画面にログインしようとしたらいつの間にか電話認証を求められるようになっていた。 マイページの「お客さま情報」にアクセスす …

no image

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

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

no image

体がかゆくなる原因

体がかゆくなる原因・理由をググっていたらあまりにも多くて何がなにやらわからなくなった。食物アレルギーや乾燥肌や内臓系の疾患や何らかの栄養素が不足や、とにかくいろいろありすぎる。 肌の乾燥 肌が乾燥して …