Question

我有一个div'框架'，其位置是相对的，包含图像和描述性文本'imgname'。我希望描述性文本位于图像的顶部，但是当我将顶部值设置为0时，文本显示在“frame”div顶部的稍下方。这是显示问题的小提琴：http://jsfiddle.net/RwQL8/6/ 我已经通过在'imgname'类中使用'top'行的负值来纠正问题here in another version of the same fiddle，但为什么这有必要呢？我尝试将'！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'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>都没有保证金，那么您的课程风格将覆盖该范围。

您未来编码的注释：您应该始终指定某些内容的所有边距。它就像发条一样简单。

当写一个边距线时（即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;

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

1 个答案: