まとまりのないブログ

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

メルカリで梱包・発送たのメル便を分解した状態で発送した

フリマサイトのメルカリで出品して、梱包・発送たのメル便での発送をしてみた。品物はテーブルで結構な大きさがある。梱包・発送たのメル便は梱包を全部配送の人がやってくれて発送できるというサービスで梱包の仕方 …

no image

Asrock Phantom Gaming 4 B365M にPS/2端子があるのに気付いた

1年ほど前に購入したAsrock Phantom Gaming 4 B365Mのバックパネルをふと見てみたらPS/2端子が存在していたことに今更ながら気付いた。一応第8・9世代対応のマザーでそこそこ新 …

no image

internet explorer6で印刷プレビューした時に背景画像が表示されない

背景画像を表示させる要素に、スタイルシートでwidthまたはheightの値を設定してあげなければ印刷プレビューした時に画像が表示されなくなってしまう。firefoxやopera、ie7では問題はなか …

no image

Raspberry pi zero と Banana pi の比較

小型のシングルボードコンピュータであるRaspberry piは割とパソコン好きには有名だが、Banana piというラズパイのパクリのようなものが存在するらしい。スペックを比較してみる。 名称 Ra …

cocos2d-x javascript no.2 タッチイベントの追加

イベントはシーンまたはレイヤー、スプライトに追加することができる。イベントを定義し、addListnerにてそのイベントと対象オブジェクトを設定することでタッチイベントを受けることができるようになる。 …