设置了相对定位relative之后，改变top值，如何去掉多余空白

最新推荐文章于 2024-05-22 19:36:03 发布

秋霜梦红尘

最新推荐文章于 2024-05-22 19:36:03 发布

阅读量1.1k

点赞数 1

文章标签： css

原文链接：https://blog.csdn.net/qq_41980461/article/details/99305459

版权

旧专栏专栏收录该内容

153 篇文章 0 订阅

订阅专栏

众所周知，relative和absolute有一个区别在于relative是相对自身定位，而absolute是相对于最近的定位父级定位，而此时的相对定位经过top值改变其在文档流中的位置之后，自身本来的位置依然在文档流中占据位置。

要想解决这个问题，我的想法就是给个margin负值，以减少下方的空白

<body>
    <!-- 此时div占据的位置是他自身的高度加上top值为110px -->
    <div style="width:100px;height:100px;border:1px solid red;position:relative;top:10px">
        
    </div>
</body>

解决这个问题

/*给div设置一个margin负值删除自身最初在文档流中留下的空白*/
div{
    margin-top:-10px;
}

例：

<body>
    <!-- 此时div占据的位置是他自身的高度加上bottom值为110px -->
    <div 
        style=" width:100px;
                height:100px;
                border:1px solid red;
                position:relative;
                bottom:10px"
    >
        
    </div>
</body>

解决：

/*给div设置一个margin负值删除自身最初在文档流中留下的空白*/
div{
    margin-bottom:-10px;
}

原文链接：https://blog.csdn.net/qq_41980461/article/details/99305459

秋霜梦红尘

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
设置了相对定位relative之后，改变top值，如何去掉多余空白

众所周知，relative和absolute有一个区别在于relative是相对自身定位，而absolute是相对于最近的定位父级定位，而此时的相对定位经过top值改变其在文档流中的位置之后，自身本来的位置依然在文档流中占据位置。要想解决这个问题，我的想法就是给个margin负值，以减少下方的空白<body>  <div style="width:100px;height:100
复制链接

扫一扫