margin为负值详解

一、对元素自身的影响

1.margin-left,margin-right为负值

1）元素本身没有宽度，会增加元素宽度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>验证</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrap{background-color: #f00;width: 800px;margin: 100px auto 0; height: 300px;font-size: 30px;}
            .box{background-color: #007AFF;margin-left:-100px;height: 200px;}
        </style>
    </head>
    <body>
        <div class="wrap">
            最外层的宽度为800px
            <div class="box">里层的元素设置了margin-left:-100px</div>
        </div>
    </body>
</html>

2）元素本身有宽度，会产生位移

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>验证</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrap{background-color: #f00;width: 800px;margin: 100px auto 0; height: 300px;font-size: 30px;}
            .box{background-color: #007AFF;width:700px;margin-left:-100px;height: 200px;}
        </style>
    </head>
    <body>
        <div class="wrap">
            最外层的宽度为800px
            <div class="box">里层的元素设置了margin-left:-100px</div>
        </div>
    </body>
</html>

 

2.margin-top为负值，不管是否设置高度，都不会增加高度，而是会产生向上的位移

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>验证</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrap{background-color: #f00;width: 800px;margin: 100px auto 0; height: 300px;font-size: 30px;}
            .box{background-color: #007AFF;margin-top:-100px;}
        </style>
    </head>
    <body>
        <div class="wrap">
            最外层的宽度为800px
            <div class="box">里层的元素设置了margin-top:-100px</div>
        </div>
    </body>
</html>

 

3.margin-bottom为负值的时候不会位移,而是会减少自身供css读取的高度.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>验证</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .box{background-color: #007AFF;margin-bottom:-100px;height: 200px;}
            .t{background-color: #f00;height: 20px;width: 200px;}
        </style>
    </head>
    <body>
        <div class="box">高度为200px</div>
        <div class="t">高度为20px</div>
    </body>
</html>

版权声明：本文为weixin_38912024原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。