margin为负值的理解

最新推荐文章于 2024-08-24 17:13:38 发布

转载最新推荐文章于 2024-08-24 17:13:38 发布 · 402 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5bed742a518825170d1aa755

本文详细解析了CSS中margin属性设置为负值时的行为表现，包括如何使元素自身及相邻元素发生位置偏移，适用于前端开发者深入了解布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>
<style>
    #div1,#div2{
        background-color: #00A0E9;
        width: 100px;
        height:100px;
    }
    #div1{
        border:1px solid #fff;
    }
    #div2{
        background-color: green;
    }
    #div1{
        margin-top: -10px;
        margin-left: -10px;
        margin-bottom: -10px;
    }

</style>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>复制代码

如图所示：margin-left、margin-top是相对于自身元素移动的距离。如margin-top: -10px;margin-left: -10px;margin为负值时，会使元素自身向左、向上移动10px;

 margin-bottom: -10px;margin-right: -10px;会使该元素下面的元素和右面的元素向上或者向左移动10;复制代码

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值