コンテンツの周りに白い枠線がありません

私は数個の要素で完全に単純なページを作成しました。私は私の 'content div'の周りに白い枠線を持っていて、それを引き起こしているものが分からない。それは私のコンテンツの左上だけに現れています。私は.body {border：0; }しかし、それは役に立たなかった。私のCSSに関しては他にもいくつかのことがありましたが、それを解決しました。ここでコンテンツの周りに白い枠線がありません

は私の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>

は私の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; 
}

はJSFiddle https://jsfiddle.net/1yL1ta5x/とコードです：また

、最適化する方法をアドバイスをいただければ幸いです少なくとも、Webページのモバイルビューとデスクトップビュー、および/または私のコードへの他の最適化は歓迎です。私は絶対初心者ですので、私にも負担してください。ありがとう。

よろしく、

出典

2017-03-07 limeThyme

白い枠線は、 ''要素のマージンです。 0に設定すると、それは消えます。 – j08691

体からのマージン。 U 'のスタイルを設定します。クラスボディではなくボディ本体ではありません – sTx

は、一部のブラウザ/フレームワーク/環境がbodyかhtmlのいずれかにデフォルトmargin、padding値を追加します。

margins/paddingをhtmlまたはbodyに上書きして、空白が消えるようにする必要があります。

ただ、次の行を追加します。

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

EDIT

div要素が100％widthとheightを占めているため、この問題が発生し、スクロールがあなたのcontainer div要素であり理由として2つ目の質問に答えるために20pxpadding-topと50pxpadding-leftを占有しています。
container divは親をオーバーフローし、スクロールを生成します。

一般的な修正は、paddingをwidthとheightに含まれるようにcontainerにbox-sizing: border-boxを適用することであろう。

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

チェック更新フィドル：https://jsfiddle.net/1yL1ta5x/1/

私はbox-sizing、全体としてcss box modelについての詳細を読むためにあなたをお勧めします。

出典

2017-03-07 18:06:46 nashcheez

ありがとうございます！私は、マージンのみのパディングをオーバーライドしようとしなかった。 – limeThyme

また、私の2番目の質問をしないでください。私は上下左右にスクロールすることができました。これは、コンテンツのdiv内で幅と高さを100％に設定することで解決すると思っていました（ブラウザのサイズが選択され、スクロールすることはできません）。これを修正する方法がありますか？ – limeThyme

あなたの答えは私の問題を解決しただけでなく、あなたのリンクの説明は私にとって金です！再びありがとう@nashcheez – limeThyme

.bodyを取り外し、本体に交換します。 .bodyはBodyという名前のクラスに適用されますが、タグを選択したいときはbodyだけになります。

また、bodyタグにclass = "body"を追加してください。

出典

2017-03-07 18:08:42

コンテンツの周りに白い枠線がありません

答えて

関連する問題