修复填充并保持一致

Question

我正在我的货运集体网站（http://www.omarayoub.com）上工作，我试图让不同部分和页面的顶部填充保持一致。

我的目标是使图像（或标题）的顶部填充精确到25px。由于以下原因，这证明是困难的：

如果我将上边距更改为0px：

.project_content img {
    margin:0px 15px 15px 0;

并且：

中的顶部填充为0px

.entry {
    border-top:1px solid transparent;
    clear:both;
    padding:0px 0 90px 0;

第一张海报的填充物以及第二张海报的填充物。但第三张海报（Twin Peaks）根本没有顶部填充物。此外，the "About" image也没有顶部填充。

作为一种解决方法，我将上边距更改为-25px：

.project_content img {
    margin:-25px 15px 15px 0;

和顶部填充为25px in：

.entry {
    border-top:1px solid transparent;
    clear:both;
    padding:25px 0 90px 0;

这样，“关于”图像具有正确的顶部填充，但第三张海报（Twin Peaks）根本没有顶部填充。如果没有办法让所有顶部填充= 25px，我怎么能至少修复（双峰）？

Answer 1

问题不在于填充，而是因为html中有<br>标记。

理想情况下，您应该从HTML中删除它，但是根据上面的注释，看起来这些可能是由WYSIWYG编辑器添加的，您无法阻止它们发生。

因此，您可以尝试使用CSS隐藏<br>标记。这不是理想的，但这是一个建议。

.project_content br:first-child {
  display: none;
}

然后删除图像上的负边距。