我的內容周圍有未知的白色邊框

我創建了一個只有幾個元素的非常簡單的頁面。我的'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/和代碼：

此外，將不勝感激的意見如何優化它至少適用於網頁的移動和桌面視圖和/或對我的代碼的任何其他優化。我是一個絕對的初學者，所以請忍受我。謝謝。

問候，

來源

2017-03-07 limeThyme

白色邊框是來自''元素的邊距。將其設置爲零並消失 – j08691

從身體的邊緣。 U爲'設置風格。身體'這是一個類而不是元素身體 – sTx

一些瀏覽器/框架/環境中添加默認margin，padding值要麼body或html。

您必須將margins/padding覆蓋爲html或body，以使空白消失。

只需添加以下內容：

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

編輯

要回答你的第二個問題，爲什麼有滾動您container格，出現這種情況是因爲在div佔地100％width和height的父母，並且還佔據了20pxpadding-top和50pxpadding-left。
因此，container div溢出其父，從而產生滾動。

一般的修復將使得padding包括在width和height申請box-sizing: border-box到container。

.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

非常感謝！我沒有嘗試重寫if的填充，只有餘量。 – limeThyme

另外，如果你不第二個問題。我可以向上/向下和向左/向右滾動，我想我可以通過在我的內容div中設置寬度和高度爲100％來解決這個問題（我假設瀏覽器大小會被拾取並且不會滾動）。你有一個想法如何解決這個問題？ – limeThyme

您的答案不僅解決了我的問題，而且您通過鏈接進行的解釋對我來說是黃金！再次感謝您@nashcheez – limeThyme

刪除.body並將其替換爲body。 .body應用於名爲body的類，而您想選擇標籤，這只是body。

或者，將class =「body」添加到您的身體標記。

來源

2017-03-07 18:08:42

我的內容周圍有未知的白色邊框

回答

相關問題