Question

我创建了一个只有少数元素的完全简单的页面。我的'内容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:miletic.olivera@gmail.com" > 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/和代码：

此外，我们还希望建议如何针对网页的移动和桌面视图以及/或对我的代码进行任何其他优化来优化它。我是一个绝对的初学者，所以忍受我。感谢。

此致

Answer 1

某些浏览器/框架/环境会将默认margin，padding值添加到body或html。

您必须将margins / padding覆盖到html或body，以便空白区域消失。

只需添加以下内容：

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

修改

要回答关于为什么在container div上有滚动的第二个问题，这是因为div占据了其父级的100％width和height，并且还占据了< em> 20px padding-top和 50px padding-left。
因此container div溢出其父级，从而产生滚动。

一般性解决方法是将box-sizing: border-box应用于container，以便padding和width中包含height。

.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作为一个整体。

Answer 2

删除.body并将其替换为正文。 .body应用于名为body的类，而您想要选择标记，它只是正文。

或者，将class =“body”添加到您的body标签。

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

2 个答案: