html - CSS:为什么 'top: 0px' 不能在相对定位的 div 中正确定位绝对定位的 'p' 元素？

Question

关闭。这个问题需要debugging details .它目前不接受答案。












想改进这个问题？将问题更新为 on-topic对于堆栈溢出。

2年前关闭。




Improve this question




我有一个相对位置的 div 'frame'，包含图像和描述性文本'imgname'。我希望描述性文本位于图像的顶部，但是当我将顶部值设置为 0 时，文本显示在略低于“框架”div 顶部的位置。这是显示问题的 fiddle :http://jsfiddle.net/RwQL8/6/
我已经更正了问题 here in another version of the same fiddle ，通过对“imgname”类中的“顶”行使用负值，但为什么这是必要的？我尝试将 '!important' 放在第一个 fiddle 中的 'top' 值之后，但它仍然显示不正确。同样，如果这是问题的根源，手动设置行高。有谁知道为什么在我的第一个 fiddle 中设置 'top' 等于 0 不足以在顶部显示文本，并且需要负值？这是我第一个 fiddle 的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's CSS Reset ，它删除了大多数元素的默认填充、边距和更多(使用它可以解决最初提示我提出这个问题的问题)。

Answer 1

由于您使用 <p>您的 .imgname 的元素webkit 给出的默认边距为 1em .您必须指定您的 .imgname具有零顶部和底部边距。我已将您的 CSS 从

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

到

margin:0 auto;

这会给你的 <p>元素的顶部和底部边距为零。

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

你也可以给你的 <p>元素的边距为 0。

p { margin:0; }

这将确保您所有的 <p>边距为零，那么您的类(class)风格将覆盖它。

对您 future 编码的说明:您应该始终指定某物的所有边距。这就像发条一样容易。

写入单个边距线时(即 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这意味着top:10px，bottom 5px，左右都是20px；