1. margin top left为负数

<style>
	body{
	    margin: 20px;
	}
	
	.container{
	    border:1px solid #ccc;
	    padding: 10px;
	    width: 300px;
	    height: 300px;
	}
	.container .item{
	    width: 100px;
	    height: 100px;
	}
	.container .border-blue{
	    border: 1px solid blue;
	    margin-top: -20px;
	    margin-left: -20px;
	}
	.container .border-red{
	    border: 1px solid red;
	    
	}
</style>

<body>
    <p>用于测试 margin top left 的负数情况</p>
    <div class="container">
        <div class="item border-blue">
            this is item 1
        </div>
        <div class="item border-red">
            this is item 2
        </div>
    </div>
</body>

在这里插入图片描述

2. margin bottom为负数

<style>
	body{
	    margin: 20px;
	}
	
	.container{
	    border:1px solid #ccc;
	    padding: 10px;
	    width: 300px;
	    height: 300px;
	}
	.container .item{
	    width: 100px;
	    height: 100px;
	}
	.container .border-blue{
	    border: 1px solid blue;
	    margin-bottom: -20px;
	}
	.container .border-red{
	    border: 1px solid red;
	    
	}
</style>

<body>
    <p>用于测试 margin top left 的负数情况</p>
    <div class="container">
        <div class="item border-blue">
            this is item 1
        </div>
        <div class="item border-red">
            this is item 2
        </div>
    </div>
</body>

在这里插入图片描述

3. margin right为负数

<style>
    body{
        margin: 20px;
    }
    
    .float-left{
        float: left;
    }

    .clearfix:after{
        content: '';
        display: table;
        clear: both;
    }

    .container{
        border:1px solid #ccc;
        padding: 10px;
        width: 300px;
        height: 300px;
    }
    .container .item{
        width: 100px;
        height: 100px;
    }
    .container .border-blue{
        border: 1px solid blue;
        margin-right: -20px;

    }
    .container .border-red{
        border: 1px solid red;
    }
</style>

<body>
    <p>用于测试 margin right 的负数情况</p>
    <div class="container clearfix">
        <div class="item border-blue float-left">
            this is item 1
        </div>
        <div class="item border-red float-left">
            this is item 2
        </div>
    </div>
</body>