2017-06-04 14 views
1

私は正方形のブラウザに完全に合うキャンバスを作ろうとしています。問題は画面の左上と左に余分なマージンを得続けていることです。私はそれを取り除くことができません。どのように私はこれを修正することができますどのような考え?キャンバスに余裕がある

red arrows

コード

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="utf-8"> 
</head> 
<style type="text/css"> 

#gameCanvas { 
    background-color: blue; 
} 

</style> 

<canvas id="gameCanvas"></canvas> 
<script type="text/javascript"> 
    var canvas = document.getElementById("gameCanvas"); 
    canvas.width = window.innerWidth; 
    canvas.height = window.innerWidth; 
</script> 
<script src="cocos2d.js"></script> 
</body> 
</html> 

答えて

1

@Katherine黄ブラウザはマージンを含め、デフォルトのスタイルシートを持って、言ったように、パディング...

html, body{ 
    margin:0; 
    padding:0; 
} 
#gameCanvas{ 
    margin:0; 
    padding:0; 
    background-color: blue; 
} 

を今、あなたはすべての上の特定のマージンやパディングを設定する必要がありますデフォルトではボディーの中の新しい要素は0になります。

0

ブラウザはマージン、パディング、およびそれ以上を含む、デフォルトのスタイルシートを持っています。これを試してください:

body { 
    padding: 0; 
} 

一般に、CSSのリセットは、デフォルトのスタイルを無効にすると便利です。あなたはこの設定ができ

+0

残念なことに、うまくいきません:( –

+1

'* {パディング:0;マージン:0;}'? '*'はユニバーサルセレクターです、これにより、すべてのエレメンツのパディングとマージンが0に設定されますts。 –

関連する問題