css - 修复填充并保持一致

Question

我正在处理我的 cargo 集合网站 ( http://www.omarayoub.com )，我正在努力使不同部分和页面的顶部填充保持一致。

我的目标是使图像(或标题)的顶部填充恰好为 25 像素。由于以下原因，这被证明是困难的:

如果我在以下位置将上边距更改为 0px:

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

顶部填充为 0px:

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

第一个海报的填充有效，第二个也有效。但是第三张海报(双峰)根本没有顶部填充。另外，the "About" image也没有顶部填充。

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

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

顶部内边距为 25px:

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

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

Answer 1

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

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

所以你可以尝试隐藏 <br>用 CSS 标记。这并不理想，但这是一个建议。

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

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