如何消除Div元素底部空白空间？求原因及解决方案

空白产生的原因 #

当你给图片设置position: relative; bottom: 250px;时，相对定位的元素只会在视觉上偏移位置，但它在文档流中的原始占位空间会被保留。也就是说，图片向上移动250px后，它原本占据的高度空间仍留在父Div里，这就导致了父Div底部出现空白。

解决方法 #

这里提供几种可行的方案，你可以根据布局需求选择：

方案1：用负margin替代相对定位偏移 #

移除图片的position: relative; bottom: 250px;，换成负margin实现向上偏移：

margin-top: -250px;
width: 100vw;
z-index: 0;

负margin会让元素向上移动，同时不会保留原始占位，父Div的高度会自动适配内容，空白自然消失。

方案2：改用绝对定位 #

如果图片不需要保留文档流中的占位，可以将图片改为绝对定位，同时给父Div设置position: relative;作为定位上下文：

/* 父Div的样式 */
position: relative;

/* 图片的样式 */
position: absolute;
bottom: 0; /* 贴住父Div底部 */
width: 100vw;
z-index: 0;

绝对定位的元素会脱离文档流，父Div的高度不再包含图片的占位，空白就会被移除。

方案3：给父Div设置负底部margin #

如果必须保留相对定位，可以给父Div添加负margin来抵消图片的占位空白：

/* 父Div的样式 */
margin-bottom: -250px;

这种方式需要注意父Div的外部布局，避免影响其他元素的位置。

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