margin为负值的解释

最新推荐文章于 2022-11-15 15:40:53 发布

Kandy凯凯

最新推荐文章于 2022-11-15 15:40:53 发布

阅读量928

点赞数 2

分类专栏：前端文章标签： html5 html css

本文链接：https://blog.csdn.net/weixin_46626833/article/details/107408976

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述
当给一个元素设置margin 负值（top/left）,该元素将在该方向上产生位移。
当给一个元素设置margin负值（bottom/right）,这个元素并不会像你所预想的产生位移，而是将任何紧随其后的元素“拉”过来，覆盖在自己的上边。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        .container{
            width: 200px;
            height: 100px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .box4,.box5{
            width: 120px;
            height: 50px; 
            float: left;
        }
        .box4{
            background-color: pink;
        }
        .box5{
            background-color: #0f0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box4"></div>
        <div class="box5"></div>
    </div>
</body>
</html>

初始代码调试结果
在这里插入图片描述
我们设置一下粉色方块的margin-right值，让下面绿色方块浮动到第一行上去
只需要在.box4里设置一个margin-right:-40px;(因为大盒子的宽度是200px,这个-40px可以理解为粉色方块右边被隐藏了40px)，下面方块即可跑上去
在这里插入图片描述

Kandy凯凯

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
margin为负值的解释

当给一个元素设置margin 负值（top/left）,该元素将在该方向上产生位移。当给一个元素设置margin负值（bottom/right）,这个元素并不会像你所预想的产生位移，而是将任何紧随其后的元素“拉”过来，覆盖在自己的上边。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title> <st.
复制链接

扫一扫