html - 本文と同じサイズの要素を追加するとスクロールバーが表示される

Question

body タグと同じサイズ (幅 + 高さ) の要素を追加すると、常に (不要?!) 水平スクロールバーと垂直スクロールバーが表示されます (Chrome と FF でテスト済み)。

/* css */
html, body {
height: 100%;
width : 100%;
margin: 0;
padding: 0;
}

/* javascript */
$("<canvas>")
.appendTo("body")
.attr("width", $("body").width())
.attr("height", $("body").height());

JSFIDDLE の完全な例。

これらのスクロールバーが表示されるのはなぜですか? 本文は、スクロールバーなしで要素に収まる十分な大きさにする必要があります。幅と高さから 4 ピクセルを削除すると、スクロールバーがなくなります。なぜ正確に 4 ピクセルなのですか?

Answer 1

デフォルトのパディングが 2px の canvas 要素と何か関係がありますか? キャンバス要素からデフォルトのマージンとパディングを削除するように css を設定するとどうなりますか?