增加宽度

margin负值有什么效果

margin-left 负值，元素自身向左移动

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        margin: 50px;
        border: 5px solid red;
    }
    .div1{
        width: 200px;
        height: 200px;
        background: green;
        margin-left: -50px;
    }
</style>

<body>
    <div class="box">
        <div class="div1"></div>
    </div>

margin-top 负值元素自身向上移动

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        margin: 50px;
        border: 5px solid red;
    }

    .div1 {
        width: 200px;
        height: 200px;
        background: green;
        margin-top: -50px;
    }
</style>

<body>
    <div class="box">
        <div class="div1"></div>
    </div>
</body>

margin-right 负值，右边的元素向左移动

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        overflow: hidden;
        margin: 50px;
        border: 5px solid red;
    }

    .div1 {
        float: left;
        width: 200px;
        height: 200px;
        background: green;
        margin-right: -50px;
    }

    .div2{
        float: left;
        width: 150px;
        height: 150px;
        background: #ccc;
    }
</style>

<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>

margin-bottom 负值，下边的元素向上移动

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        overflow: hidden;
        margin: 50px;
        border: 5px solid red;
    }

    .div1 {
        float: left;
        width: 200px;
        height: 200px;
        background: green;
        margin-bottom: -50px;
    }

    .div2{
        float: left;
        width: 150px;
        height: 150px;
        background: #ccc;
    }
</style>

<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>

margin负值的应用

<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .box {
        width: 620px;
        margin: 50px auto;
        border: 5px solid red;
    }
    .box ul{
        overflow: hidden;
        margin-right: -10px;
        background: #ccc;
    }
    .box li{
        float: left;
        width: 200px;
        height: 200px;
        background: green;
        margin-right: 10px;
    }
</style>

<body>
    <div class="box">
        <ul>
            <li>图片1</li>
            <li>图片2</li>
            <li>图片3</li>
        </ul>
    </div>
</body>

注：要是嫌不美观可以给父级加上overflow：hidden；可以将超出的部门隐藏；如下图。

    .box {
        overflow: hidden;
        width: 620px;
        margin: 50px auto;
        border: 5px solid red;
    }

1-6、margin设置负值后，会怎样？有何应用？

增加宽度

margin负值有什么效果

margin负值的应用