我有一个小问题......
它是左上角的网页角落。在那里,我有div
背景,div
距离边缘几个像素。
我的代码:
HTML
<div id="contcont"></div>
CSS
#contcont{
width: 100% ;
height: 100%;
background-color: rgb(0,0,255);
background-image:url('bg.jpg');
background-size: cover;
background-repeat: no-repeat;
top:0;
bottom: 0;
left: 0;
right: 0;
}
如何消除差距?
答案 0 :(得分:6)
大多数浏览器都有body元素的默认边距。所以包括:
body { margin: 0; padding: 0; }
要删除所有浏览器默认设置,要开始清理,请执行Google搜索:'css reset'
答案 1 :(得分:2)
重置您的CSS样式
答案 2 :(得分:1)
试试这个:
* {
margin: 0px;
padding: 0px;
}
这是一个例子,至少没有你的背景,因为我没有它。相反,我使用了黑色背景:http://jsfiddle.net/AYjc5/1/
答案 3 :(得分:1)
我猜你想让图片冲到左上角,所以这就是你要做的事情
#contcont{
width: 100% ;
height: 100%;
background-color: rgb(0,0,255);
background-image:url('bg.jpg');
background-size: cover;
background-repeat: no-repeat;
top:0;
bottom: 0;
left: 0;
right: 0;
margin-top:0px;
margin-left:0px;
}
body{
padding-top:0px;
padding-left:9px;
}
答案 4 :(得分:1)
尝试在css中添加以下样式。边距,填充和边框将由文件中的所有元素继承。并且您可以在需要时覆盖。
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
答案 5 :(得分:0)
检查边距和填充,将它们设置为零。
答案 6 :(得分:0)
使用Eric Meyer的重置
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article, aside, figure, footer, header,
hgroup, nav, section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
/* END RESET CSS */