CSS绝对定位图片时bottom底部边距不生效如何修复

给元素设置position: absolute后，如果同时指定垂直方向的两个定位属性top和bottom，且元素height设为auto，浏览器会优先采用top的值确定元素的垂直位置，元素高度完全由自身内容（此处为图片原始尺寸）撑开，bottom的定位约束会被直接忽略，这就是你设置的底部边距不生效的核心原因。

根据实际布局需求选择对应写法即可：

• 需求1：图片保持原始宽高比，仅需要在图片下方留出40px间距
  这种场景不需要用bottom做定位，直接用外边距实现底部间距即可：

  #photo {
    position: absolute;
    top: 40px;
    left: 25%;
    margin-bottom: 40px;
    width: auto;
    height: auto;
  }
  

• 需求2：图片需要自动适配高度，始终和定位参照容器的顶部、底部各保持40px间距
  这种场景不能给高度设auto，需要让浏览器自动计算高度来满足上下定位约束，同时要确保定位参照容器有明确高度：

  /* 给父容器设置明确高度，这里以铺满整个视口为例 */
  body {
    min-height: 100vh;
    margin: 0;
    position: relative;
  }
  #photo {
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 25%;
    width: auto;
    /* 移除height: auto，若要避免图片拉伸可加 object-fit: contain; */
  }
  

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