margin为负值详解

最新推荐文章于 2023-07-06 11:00:22 发布

爱写日记的仙女

最新推荐文章于 2023-07-06 11:00:22 发布

阅读量2.1w

点赞数 46

分类专栏： html+css

本文链接：https://blog.csdn.net/weixin_38912024/article/details/88837111

版权

html+css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、对元素自身的影响

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>

爱写日记的仙女

关注

46
点赞
踩
112

收藏

觉得还不错? 一键收藏
10
评论
margin为负值详解

一、对元素自身的影响1.margin-left,margin-right为负值1）元素本身没有宽度，会增加元素宽度<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>验证</title> &...
复制链接

扫一扫