2017-06-04 2 views
1

J'essaie de faire une toile qui s'intègre parfaitement dans un navigateur carré. Le problème est de continuer à obtenir cette marge supplémentaire en haut et à gauche de l'écran et je suis incapable de m'en débarrasser. Une idée de comment je peux résoudre ce problème?Marge supplémentaire dans la toile

red arrows

code

<!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> 

Répondre

1

Comme @Katherine Huang dit, les navigateurs ont par défaut stylesheets comprennent des marges, rembourrage ...

Vous pouvez définir ceci:

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

Maintenant, vous devrez définir des marges spécifiques et sur tous les rembourrages nouvel élément à l'intérieur du corps, parce qu'ils auront par défaut 0.

0

navigateurs ont des feuilles de style par défaut qui comprennent des marges, rembourrage, et plus encore. Essayez ceci:

body { 
    padding: 0; 
} 

En général, les réinitialisations CSS sont pratiques pour remplacer les styles par défaut.

+0

Ne semble pas fonctionner malheureusement :( –

+1

Que diriez-vous de '* {padding: 0; marge: 0;}'? '*' est le sélecteur universel , donc cela va mettre le padding et les marges à 0 pour tous les elemen ts. –