如何移除项目列表中图片的padding并保留其他元素的padding？

首先，你之前的全局img样式没生效，大概率是因为列表项的父容器本身带有padding，图片的padding设为0也抵消不了父容器的内边距。要实现图片顶在盒子上方、其他元素保留padding的效果，可以按下面步骤来：

1. 定位列表项的容器类名 #

打开浏览器开发者工具（按F12），选中列表里的卡片容器，查看它的类名（比如Moonwalk主题里可能是.project、.card或者.post-item这类）。

2. 编写精准的SCSS样式 #

根据你找到的容器类名，添加以下样式（把.project-card换成你实际的类名）：

// 给列表项容器设置相对定位，保留左右和底部的padding，去掉顶部padding
.project-card {
  position: relative;
  padding: 0 1.5em 1.5em; // 可根据原主题的padding值调整
  border-radius: 0.5em; // 和你的图片圆角匹配
}

// 让图片充满容器顶部，去掉自身padding/margin
.project-card img {
  width: 100%;
  padding: 0;
  margin: 0;
  border-radius: 0.5em 0.5em 0 0; // 只保留顶部圆角，和容器衔接
}

// 给图片下方的内容单独加顶部padding，保证其他元素的间距正常
.project-card .card-content {
  padding-top: 1.5em; // 和容器的左右padding值一致
}

如果不想修改容器的padding，也可以用负margin让图片突破父容器的padding：

// 假设父容器原本的padding是1.5em
.project-card img {
  padding: 0 !important;
  margin-top: -1.5em; // 抵消父容器的顶部padding
  margin-left: -1.5em; // 抵消左侧padding
  margin-right: -1.5em; // 抵消右侧padding
  width: calc(100% + 3em); // 宽度加上左右负margin的总和，充满容器
  border-radius: 0.5em 0.5em 0 0;
}

为什么之前的方法没用？ #

• 负padding本身不是CSS的合法属性，所以不会生效；
• 全局img的!important只能去掉图片自身的padding，但父容器的padding依然存在，所以图片和容器顶部还是有间距。

内容的提问来源于stack exchange，提问作者Darkblade