css - 拍立得效果表现奇怪

Question

我是 CSS 的新手，到目前为止，通过教程和阅读本网站上的一些重要建议，我已经过得很好，但我就是无法理解这个问题。我正在尝试使用 css 实现宝丽来效果，并在我的网站上获得一些奇怪的效果。我已经在 jsfiddle 上测试了代码，它运行良好，我什至复制了整个站点的 css，它在 jsfiddle 中仍然运行良好。但是当我在我的网站上使用该代码时，边距、填充、旋转等都是错误的。

请帮助我在这里不知所措，不知道是什么影响了它，我唯一的想法是由于某种原因，我使用的 css 选择器没有正确选择元素。

站点页面是:http://kamhairandmakeup.co.uk/vintage/

JSFiddle 是:

<iframe width="100%" height="300" src="http://jsfiddle.net/deepwaterlizard/NxsUQ/1/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> 

或

http://jsfiddle.net/deepwaterlizard/NxsUQ/1/

如果需要，我可以在这里发布 css 和 html，但不想占用太多空间，提前谢谢。

Answer 1

我不完全确定，但对于初学者来说，第一张图片(黑白)在您的网站上有这个 html:

<p>                
    <!--the caption that appears below the image-->
    <br>
</p>

在figcaption之后标签，它不存在于你的 fiddle 中。

看起来您正在使用 Wordpress。它的编辑器会生成很多<p>标签，例如对于每一行，它将生成 <p>&nbsp;</p>或为空 <p></p>