css – 尽管margin：0和padding：0,但是页面顶部的间隙

我的网站顶部有一个32px的差距,尽管设置边距和paddings为0.我知道这是32px,因为我可以修复它与padding：-32px.但后来我有一个差距在底部！在Firebug中,即使我将页边距和paddings设置为0,它似乎从 HTML元素的开始就只能从32px开始.

这是我的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%;
}

容器横幅是最顶层的div,后面是容器(包括内容).

Thx为任何帮助.
MRB

解决方法

我认为这是由于使用position：relative和你的h1元素默认继承了margin.当您使用position：relative时,边距似乎没有与实际内容相移,因此应用于页面顶部.

我已经改变了相关的CSS来解决这个问题：

.container_banner h1{
  font-size: 48px;
  position: relative;
  top: 130px;
  left: 250px;
  width: 400px;
  margin-top: 0;
}

您可能需要对设置为位置的任何其他元素执行相同操作：相对并具有余量(例如h3标签)

最好减少使用位置相对,因为有点难以预测这种行为.

原文链接：https://www.f2er.com/css/214378.html

css – 尽管margin：0和padding：0,但是页面顶部的间隙

解决方法

猜你在找的CSS相关文章