如何为div元素添加其与页面底部之间的空白间距

• 相对定位（position: relative）的top属性仅偏移元素的视觉渲染位置，不会改变元素在文档流中原本占用的空间。你将div向下偏移136px后，元素底部视觉上超出了原本的文档流占位高度，页面不会自动为视觉偏移的部分新增排版空间，因此div下方的默认白色间距就消失了。

方案1（最推荐）：用margin-top替代top偏移 #

如果你的需求只是让div距离顶部有136px的间距，直接删除相对定位配置，改用margin-top即可，margin会自动撑开文档流高度，不会出现溢出问题：

div {
  background-color: grey;
  margin-top: 136px;
}

方案2：必须保留relative定位时补全底部间距 #

如果因为其他联动逻辑必须保留position: relative和top配置，手动给div添加和偏移值相等的margin-bottom，补回偏移占用的下方空间即可：

div {
  background-color: grey;
  position: relative;
  top: 136px;
  margin-bottom: 136px;
}

方案3：给父元素添加底部内边距 #

也可以给该div的直接父元素添加padding-bottom: 136px，提前预留出元素向下偏移需要的空间，效果和给div加margin-bottom一致。

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