我有一个图像和一个矩形（带有彩色背景的段落），它们的顶部应该排成一行。它们都是绝对定位的并且具有相同的样式顶部值，但矩形的顶部出现在图像顶部下方约15px处，我无法弄清楚原因。有什么理由可能会发生这种情况吗？
HTML：
<img class="v1" id="image" src="/COMP2405A4/images/resized_adorkable!.jpg" style="position:absolute;top:313px;left: 61px;" alt = "Your Image">
<p class="mask" id="tmask" style="position:absolute;top:313px;left: 61px;width: 400px;height: 20px"> </p>
CSS：
p.mask {background: rgb(255,255,255);
opacity:0.5;
}
答案 0 :(得分：0)
好像你有正确的想法。你的其他课程可能会让你失望。如果你想看看，我就举了一个例子。
答案 1 :(得分：0)
它不能是其他类，因为相关样式是通过样式标记应用的，它会覆盖它可能具有的默认样式。
然而，我可以推测它可能与元素（可能是图像）有关，通过样式表创建额外的偏移量具有其他样式。
与图像上的填充类似，每个浏览器的效果不同，但可能会产生额外的偏移。
你可以做的最好的事情是检查为什么它不正确的偏移是使用firefox中的chrome或firebug中的开发人员工具来选择相关元素并查看应用哪些样式以及它们来自何处。 Internet Explorer也有调试工具，但我不建议他们开始使用。
如果你想要一个更好的答案，你将不得不在jsfiddle中重现它，这样我们就可以看出出了什么问题。尝试带走东西，直到没有任何与虫子无关的东西，或者如果虫子在这个过程中消失，你可能已经自己解决了。阅读 how to ask faq for more information。
答案 2 :(得分：0)
您的元素没有对齐，因为元素的边距不同。
尝试在margin: 0;元素上明确设置p。