我创建了一个只有几个元素的非常简单的页面。我的“内容 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/和代码:
另外,如果至少针对网页的移动和桌面 View 优化它和/或对我的代码进行任何其他优化,我将不胜感激。我是一个绝对的初学者,所以请耐心等待。谢谢。
问候,
最佳答案
一些浏览器/框架/环境将默认的 margin
、padding
值添加到 body
或 html
.
您必须将 margins
/padding
覆盖到 html
或 body
以使空白消失.
只需添加以下内容:
html, body {
margin: 0;
padding: 0;
}
编辑
要回答关于为什么在您的 container
div 上滚动的第二个问题,发生这种情况是因为 div 占据了 100% width
和 height
并且还占据了 20px padding-top
和 50px padding-left
。
因此 container
div 会溢出其父级,从而产生滚动。
一般的修复方法是将 box-sizing: border-box
应用于 container
以便 padding
包含在 宽度
和高度
。
.container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #6600cc;
padding: 20px 0px 0px 50px;
box-sizing: border-box;
}
检查更新的 fiddle :https://jsfiddle.net/1yL1ta5x/1/
我建议您阅读有关 box-sizing 的更多信息, 和 css box model作为一个整体。
关于html - 我的内容周围有未知的白色边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42655242/