Je ne suis pas nouveau en HTML ou CSS, mais je ne sais vraiment pas pourquoi cela se produit. Je pourrais juste être stupide et c'est une question facile, quelque chose ne va vraiment pas. J'ai vraiment du mal avec ça. J'ai une page Web très simple avec un élément div. Peu importe ce que je fais, j'ai encore de la place en haut, sur le côté et en bas. Voici une image.

enter image description here

Et voici mon code HTML et CSS.

 <!DOCTYPE html>
    <html>
    <head>
    <title>Home</title>
    <style>
      .SideBar {
        background: #4c4c4c;
        float: left;
        height: 100%;
        margin-left: 0px;
        padding-right: 25px;
      }
    </style>
    </head>
     <body style="background-color: #05bcff">
       <div class="SideBar">
          <p style="margin: 0px; padding: 0px">
            asd
          </p>
        </div>
      </body>
    </html>
0
thebootsie123 21 avril 2017 à 04:20

3 réponses

Meilleure réponse

Vous devez attribuer margin 0 et padding 0 à l'élément body de votre style.

2
Ousmane D. 21 avril 2017 à 01:33

Comme l'a dit un employé de Frontend, ajoutez simplement

.body{
    margin: 0;
    padding: 0;
}

Beaucoup de gens ont réinitialisé les codes CSS des employés en haut de leurs feuilles de style, ce qui inclut cela. C'est essentiellement une liste de remplacements par défaut qui efface tout style sur les éléments vous permettant de commencer avec une ardoise propre Voir (http://cssreset.com/scripts/html5-doctor-css -reset-styleheet /)

1
Rando 21 avril 2017 à 01:30

Cela se produit parce que l'élément <body> a une marge par défaut dans certains navigateurs. Différents navigateurs peuvent choisir d'appliquer un style de base par défaut aux éléments. Chrome, par exemple, ajoute une marge de 8 px par défaut. Si vous définissez

body {
  margin: 0px;
}

Cela disparaîtra.

Une meilleure façon de procéder consiste à inclure Reset.css ou < a href = "https://necolas.github.io/normalize.css/" rel = "nofollow noreferrer"> Normalize.css dans votre code. Reset.css supprimera absolument tout, de sorte que ce que vous écrivez soit exactement ce qui est affiché. Cela vous donne un meilleur contrôle, mais dans la plupart des cas, c'est trop. Par exemple, les balises <h1> , <h2> , <h3>.. auront toutes la même apparence après l'application de Reset.css.

Normalize.css, d'un autre côté, préserve le style utile, mais s'assurera que vos éléments sont rendus de manière cohérente dans tous les navigateurs. Ceci est préféré dans la plupart des cas.

Dans Codepen, vous pouvez même les essayer. Si vous cliquez sur "Paramètres", vous pouvez choisir d'inclure "Normaliser" ou "Réinitialiser" dans votre CSS. Vous pouvez jouer avec ces derniers pour voir comment vos éléments sont affichés sous chacun.

1
redFur 21 avril 2017 à 01:43