为何无法用CSS定位页脚中的图片？

你的操作存在两个关键问题：

1. CSS选择器未定位到目标图片
   你编写的.footer_image选择器仅选中了包裹图片的<div>容器，并非图片本身。所以你设置的height:60rem只会作用在div上，不会影响内部的<img>元素。

2. 行内样式的优先级干扰
   图片标签自带行内样式style="margin-left:20px"，行内样式的优先级高于外部CSS规则。如果要修改这个margin属性，普通的CSS选择器会被行内样式覆盖。

修正方案 #

方案1：精准定位图片并覆盖行内样式 #

调整CSS选择器指向div内部的图片，若需修改行内样式属性，可使用!important强制覆盖：

.footer_image img {
  height: 60rem;
  /* 强制覆盖行内的margin-left */
  margin-left: 0 !important;
}

方案2：移除行内样式（更推荐） #

直接删除图片标签中的行内样式，用CSS统一控制样式，避免优先级冲突：

<footer>
  <div class="footer_image">
    <img src="https://via.placeholder.com/200x200">
  </div>
</footer>

.footer_image img {
  height: 60rem;
  margin-left: 0; /* 可自由设置所需值 */
}

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