我的内容周围有未知的白色边框 [英] Unknown white border around my 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: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/和代码:
此外，我们将建议您至少如何针对网页的移动和桌面视图进行优化和/或对我的代码进行任何其他优化，以获取建议.我是一个绝对的初学者，所以请耐心等待.谢谢.
此致
某些浏览器/框架/环境向body或html添加默认的margin，padding值.
您必须将margins/padding覆盖为html或body，以使空白消失.
只需添加以下内容:
html, body {
margin: 0;
padding: 0;
}
编辑
要回答第二个问题，为什么container div上会有滚动，这是因为div占据了其父级的width和height的100％，还占据了 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 的更多信息
a>和 css盒子模型整个.I've created an utterly simple page with only a few elements. I have a white border around my 'content div' and can't figure out what is causing it. It is appearing only top and left of my content. I've tried removing it with .body { border: 0; }, but that did not help. Also a few other things with regard to my CSS, but solved it.
Here is my HTML code:
<!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>
Here is my 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;
}
Here is the JSFiddle https://jsfiddle.net/1yL1ta5x/ and the code:
Also, would appreciate advice how to optimize it for, at least, mobile and desktop views of the webpage and/or any other optimization to my code is welcome. I am an absolute beginner, so bear with me. Thanks.
Regards,
Some browsers/frameworks/environments add default margin, padding values to either the body or the html.
You have to override the margins/padding to the html or body for the white space to disappear.
Just add the following:
html, body {
margin: 0;
padding: 0;
}
EDIT
To answer your second question as to why there is scroll on your container div, this happens because the div occupies 100% width and height of its parent and also occupies the 20px padding-top and 50px padding-left.
Hence the container div overflows its parent thus producing a scroll.
A general fix would be to apply box-sizing: border-box to container so that the padding is included in the width and height.
.container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #6600cc;
padding: 20px 0px 0px 50px;
box-sizing: border-box;
}
Check updated fiddle: https://jsfiddle.net/1yL1ta5x/1/
I would suggest you to read more about box-sizing, and the css box model as a whole.
这篇关于我的内容周围有未知的白色边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
