{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 迷人小祖宗 的问题《Gap at top of page despite margin:0 and padding: 0》','https://www.manongdao.com/q-615729.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
There's a 32px gap at the top of my site, despite setting margins and paddings to 0. I know it's 32px because I can fix it with padding: -32px. But then I have a gap at the bottom! In Firebug, it seems the body only start 32px down from the beginning of the HTML element, even though I've set margins and paddings to 0.
Here's my CSS:
html {
height: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #a7a9ac;
color #666666;
background-image: url('body-bg.gif');
background-repeat: repeat-x;
height: 100%;
padding: 0;
margin: 0;
}
body, p, ol, ul, td {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 13px;
line-height: 18px;
}
.container_banner h1{
font-size: 48px;
position: relative;
top: 130px;
left: 250px;
width: 400px;
}
.container_banner h3{
position: relative;
top: 0px;
left: 32px;
font-size: 10px;
color: #F8F8F8;
}
.container_banner{
position: relative;
top: 0px;
background-image: url('banner.png');
background-repeat: no-repeat;
margin: 0 auto;
width: 945px;
height: 188px;
padding: 0px;
background-color: #ffffff;
}
.container{
position: relative;
top: 0px;
margin: 0 auto;
min-height: 100%;
width: 945px;
padding: 0px;
padding-top: 20px;
margin-bottom: 0px;
background-color: #ffffff;
background-image: url('thin-background.png');
}
.content{
margin-top: 0px;
margin-left: 30px;
min-height: 100%;
}
Container banner is the topmost div, followed by container (which includes content).
if this div was insine body (for example, or any othere div) set margin and padding for 0px; and it should wrok well
and it should fix it
WordPress automatically adds in an admin bar using
wphead(); You and I have probably somehow deleted the admin bar stuff so it just appears empty, but if we had of left the admin bar details it'd be there.Add this to your functions.php to get rid of it:
My problem WAS : a H2 html tag, which was the first child tag of a DIV, caused a gap on top of the div.
Such gap I would expect using the css 'margin(-top)' property. The DIV had no (inherited) "margin(-top)" CSS property though.
Removing the H2 child removed the unexpected gap but is not a good solution.
What truly solves the problem is setting CSS property "display" for the DIV to 'inline-block'. You can use the H2 (or Hx) without the unwanted gap as consequence then.
I hope this is the answer that solves your problem!
I'm not quite sure what you mean, but I imagine your problem is either going to be down to some invalid HTML (make sure you are using a correct doctype), or the
padding-top: 20px;rule in yourcontainerclass.Or, you have an error in your CSS,
color #666666. There is not:between. May be that is causing the CSS to be parsed in the wrong way.I think this is caused by the use of position: relative and your h1 element inheriting a margin by default. When you use position: relative, the margin does not seem to be shifted with the actual content and therefore gets applied to the top of the page.
I have changed the relevant CSS to fix this:
You may need to do the same for any other elements that are set to position: relative and have a margin (e.g. h3 tags)
It would be best to cut down on the use of position relative as it is somewhat difficult to predict such behaviour.