Bordure blanche inconnue autour de mon contenu

J'ai créé une page tout à fait simple avec seulement quelques éléments. J'ai une bordure blanche autour de mon 'contenu div' et je n'arrive pas à comprendre ce qui le cause. Il apparaît seulement en haut et à gauche de mon contenu. J'ai essayé de le supprimer avec .body {border: 0; }, mais cela n'a pas aidé. Aussi quelques autres choses à propos de mon CSS, mais résolu.Bordure blanche inconnue autour de mon contenu

Voici mon code HTML:

<!DOCTYPE html> 
<html lang='en'> 

<head> 
    <meta charset='UTF-8' /> 
    <title>Olivera Miletic graphic desig</title> 
    <link rel='stylesheet' href='style.css' /> 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet"> 
</head> 

<body> 
    <div class="container"> 
     <div class="mainText"> 
      <p> OLI<span class="secondColor">APPARENTLY </p> 
      <p class="stayTuned"> SOON. STAY TUNED. </p> 
      </div> 
        <div> 
         <p class="meanWhile"> meanwhile <a href="http://www.oliveramiletic.com" target="_blank"> WORK </a>/<a href="https://www.behance.net/olivera_m" target="_blank"> BE </a>/<a href="https://twitter.com/oliapparently" target="_blank"> TW </a>/<a href="mailto:[email protected]" > MAIL </a> 
         </p> 
       </div> 
      </div> 
     </body> 
    </html>

Voici mon CSS:

.container { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    overflow:hidden; 
    background-color: #6600cc; 
    padding: 20px 0px 0px 50px; 
    display: box; 
} 

.body { 
    margin: 0; 
} 

.mainText { 
    font-family: 'Open Sans', sans-serif; 
    font-size: 64px; 
    color: #FF0066; 
    font-weight: bolder; 
    line-height: 0%; 
    margin-bottom: 70px; 

} 

.secondColor { 
    color: #00ccff; 
} 

.stayTuned { 
    font-family: 'Open Sans', sans-serif; 
    font-size: 25px; 
    color: #ffffff; 
    font-weight: bolder; 
} 

.meanWhile { 
    font-family: 'Open Sans', sans-serif; 
    color: #ffffff; 
    font-weight: lighter; 
} 

a { 
    color: #ffffff; 
    text-decoration: none; 
}

Voici jsFiddle https://jsfiddle.net/1yL1ta5x/ et le code:

En outre, apprécierait des conseils comment optimiser pour, au moins, les vues mobiles et de bureau de la page Web et/ou toute autre optimisation à mon code est la bienvenue. Je suis un débutant absolu, alors supportez-moi. Merci.

Cordialement,

Source

2017-03-07 limeThyme

La bordure blanche est la marge de l'élément ''. réglez-le à zéro et il disparaît – j08691

Marges du corps. U définir le style pour '.corps 'qui est une classe et non pour le corps de l'élément – sTx

Certains navigateurs/cadres/environnements ajouter par défaut margin, padding valeurs soit le body ou html.

Vous devez surcharger le margins/padding au html ou body pour l'espace blanc à disparaître.

il suffit d'ajouter les éléments suivants:

html, body { 
    margin: 0; 
    padding: 0; 
}

EDIT

Pour répondre à votre deuxième question de savoir pourquoi il y a défilement de votre container div, cela se produit parce que le div occupe 100% width et height de son parent et occupe également le 20pxpadding-top et 50pxpadding-left.
Par conséquent, la div container déborde de son parent, produisant ainsi un défilement.

Un correctif général serait d'appliquer box-sizing: border-box à container afin que le padding est inclus dans le width et height.

.container { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    background-color: #6600cc; 
    padding: 20px 0px 0px 50px; 
    box-sizing: border-box; 
}

Vérifiez violon Mise à jour: https://jsfiddle.net/1yL1ta5x/1/

Je vous suggère de lire plus sur box-sizing, et l'css box model dans son ensemble.

Source

2017-03-07 18:06:46 nashcheez

Merci beaucoup! Je n'ai pas essayé de remplacer le remplissage de si, seulement la marge. – limeThyme

Aussi, si vous ne faites pas ma deuxième question. Je suis capable de faire défiler vers le haut/bas et gauche/droite que je pensais résoudre en réglant la largeur et la hauteur à 100% dans mon contenu div (mon hypothèse que la taille du navigateur serait ramassé et il n'y aurait pas de défilement possible). Avez-vous une idée pour résoudre ce problème? – limeThyme

Non seulement votre réponse a résolu mon problème, mais votre explication à travers les liens est dorée pour moi! Merci encore @nashcheez – limeThyme

Retirer le corps et le remplacer par le corps. .body est appliqué au corps nommé de la classe, tandis que vous voulez sélectionner le tag, qui serait juste body.

Vous pouvez également ajouter class = "body" à votre balise body.

Source

2017-03-07 18:08:42

Bordure blanche inconnue autour de mon contenu

Répondre

Questions connexes