CSS:为什么'top:0px'没有正确定位一个绝对定位的'p'元素？

Question

我有一个div'框架',有一个相对位置,包含一个图像和描述性文本'imgname'.我希望描述性文本位于图像的顶部,但是当我将顶部值设置为0时,文本显示在"frame"div顶部的稍下方.这是显示问题的小提琴:http://jsfiddle.net/RwQL8/6/ 我已经在同一个小提琴的另一个版本中纠正了这个问题,通过在'imgname'中使用'top'行的负值上课,但为什么这有必要？我尝试将'!important'放在我的第一个小提琴中的'top'值之后,它仍然显示不正确.同样,如果是问题的根源,手动设置行高.有谁知道为什么在我的第一个小提琴中设置'top'等于0不足以在顶部显示文本,并且需要负值？这是我的第一个小提琴的CSS代码:

.art {
  margin-left: auto;
  margin-right: auto;
  height: 1000px;
  width: 90%;
  padding-top: 25px;
  padding-left: 25px;
  background-color: red;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center; }

.frameswrapper {
  font-size: 0; }

.frame {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 300px;
  background-color: tan;
  margin-top: 0px;
  margin-bottom: 25px;
  margin-right: 25px;
  padding: 0px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden; }

.fluid {
  width: 100%;
  height: auto; }

.imgname {
  position: absolute;
  display: inline-block;
  font-family: Arial;
  text-align: center;
  color: black;
  font-size: 16pt;
  width: 100%;
  background-color: cyan;
  margin-right: auto;
  margin-left: auto;
  top: 0px !important; }

谢谢阅读.

编辑:请参阅ngtCleaner关于定位差异的答案(这是由于'p'元素的浏览器定义的边距).如果你是一个新的学习者,你可能会对Will关于CSS重置文件的评论感兴趣,这可能会阻止我的问题.

编辑:看到这个答案已经非常受欢迎,我想总结以上内容,以帮助新的网页设计/开发人员.

我遇到的问题是由于Web浏览器具有HTML元素的默认CSS样式(并且不同的浏览器具有略微不同的默认样式).您可能会认为留下一个元素,例如P标签,没有声明的样式将意味着它没有"活动"样式,但由于上述原因,您会错.

我建议使用Normalize.css - 这是一个标准化浏览器默认样式的样式表,这有助于创建布局,因为它为您提供了更好的跨浏览器基础.您还可以使用Eric Meyer的CSS重置功能,它可以删除默认的填充,边距以及大多数元素(使用此功能可以解决最初促使我提出这个问题的问题).

Answer 1

由于您使用webkit 的<p>元素.imgname给出了默认的边距1em.您必须指定您的.imgname上边距和下边距为零.我已经改变了你的CSS

margin-left:auto;
margin-right:auto;

至

margin:0 auto;

这将为您的<p>元素提供零上下边距.

http://jsfiddle.net/RwQL8/7/

你也可以直接给你的<p>元素一个0的边距.

p { margin:0; }

这将确保你的所有<p>遗嘱都没有余量,那么你的课堂风格将覆盖它.

您未来编码的注意事项:您应始终指定某些内容的所有边距.它就像发条一样简单.

当写一个边缘线时(即margin: 10px 20px 15px 5px;你可以将它读作第一个数字top并从那里顺时针方向移动. 20px是正确的,15px是底部,5px是左边.它也可以这样写:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 5px;

如果仅使用两个数字,则第一个数字对应于顶部和底部,而第二个数字对应于左侧和右侧.即margin:10px 20px;是一样的

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

你也可以用三个数字做同样的事情; margin:10px 20px 5px这意味着顶部:10px,底部5px,左右两边都是20px;