我的内容周围有未知的白色边框

我创建了一个只有几个元素的非常简单的页面。我的'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

我的内容周围有未知的白色边框

回答

相关问题